Question

我刚刚开始学习如何使用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。

Answer 1

在aniomation期间更改“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/

Answer 2

试试这个：

$(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");
  });
});

Answer 3

如果将按钮设置为display:absolute并将其包装在使用display:relative的容器元素中，则可能会得到更好的结果。然后，在动画期间调整按钮元素的css左右属性。在这样的情况下，我更喜欢在元素上为它们的“起始位置”设置一些初始样式，然后将不会改变为css文件的css。

Here is a jsfiddle演示这个想法并帮助说明这些要点。

改变jquery宽度/高度动画的方向

3 个答案: