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

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

在动画期间更改“顶部”和“左侧”属性:

$(".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/