2

我刚刚开始学习如何使用 jQuery 制作动画，但我无法找到解决方案（如果有的话）来解决我遇到的一个小美学问题。

这是我正在使用的代码：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script> 
$(document).ready(function(){
$(".cause_button").css("cursor","pointer");
$(".cause_button").on('mouseenter',function(){
  $(this).stop().animate({height:100, width:100, opacity:1.0}, "fast");
});
$(".cause_button").on('mouseleave',function(){
  $(this).stop().animate({height:75, width:75, opacity:.75}, "fast");s
});
});
</script>

这是具有“.cause_button”类的图像上的一个非常简单的悬停进/出动画。动画效果很好，但宽度/高度向下和向右扩展。有什么办法可以让图像向各个方向向外扩展？

jsFiddle：http: //jsfiddle.net/FHkw2/1/

PS：我知道有使用过渡效果的 CSS3 替代方案，但它们实现了相同的结果，并且似乎与浏览器不太兼容，所以我试图专注于使用 jQuery。

4

3 回答 3

2

在动画期间更改“top”和“left”属性：

$(".cause_button").on('mouseenter',function(){
    $(this).stop().animate({height:100, width:100, opacity:1.0, left: -13, top: -13}, "fast");
});
$(".cause_button").on('mouseleave',function(){
  $(this).stop().animate({height:75, width:75, opacity:.75, left: 0, top: 0}, "fast");
});

在这里检查：http: //jsfiddle.net/FjNy5/2/

我建议你使用 on() 之类的文档让它这样做：

$(".cause_button").on({
    'mouseenter': function(){
        $(this).stop().animate({height:100, width:100, opacity:1.0, left: -13, top: -13}, "fast");
    }, 
    'mouseleave': function(){
        $(this).stop().animate({height:75, width:75, opacity:.75, left: 0, top: 0}, "fast");
    }
});

在这里检查：http: //jsfiddle.net/ETu3A/

于 2013-03-21T22:29:25.870 回答
0

试试这个：

$(document).ready(function(){
  $(".cause_button").css("cursor","pointer");
  $(".cause_button").css("position","relative"); // required for offset positioning
  $(".cause_button").on('mouseenter',function(){
    $(this).stop().animate({
      left: -12.5, top: -12.5,
      height:100, width:100, opacity:1.0}, "fast");
  });
  $(".cause_button").on('mouseleave',function(){
    $(this).stop().animate({
      left: 0, top: 0,
      height:75, width:75, opacity:.75}, "fast");
  });
});
于 2013-03-21T22:30:17.120 回答
0

如果将按钮设置为display:absolute并将其包装在使用display:relative. 然后，在动画期间调整按钮元素的 css left 和 right 属性。在这种情况下，我更喜欢为元素的“起始位置”设置一些初始样式，然后将不会更改的 css 放入 css 文件中。

这是一个 jsfiddle来演示这个想法并帮助说明这些观点。

于 2013-03-21T22:38:29.777 回答