动画scaleX / scaleY

Question

jQuery不提供 scaleX / scaleY过渡效果 - 是否有解决方案（插件）来执行此操作？

我正在考虑这个例子：

图片版权：（c）2011 Microsoft，http://msdn.microsoft.com/en-us/library/ms742560.aspx

Answer 1

jQuery UI确实提供了这一点。 请参阅http://docs.jquery.com/UI/Effects/Scale

Answer 2

jQuery提供宽度/高度过渡效果。你不能用它吗？

您还可以使用计时器（setInterval）并制作自己的动画。您将缩放量分割为若干帧，然后逐帧缩放。您还可以使用一些缓动函数来使动画更有趣。

Answer 3

我找到了一种使用CSS过渡实现这一目标的好方法。添加＆＃34; Ease＆＃34;转换元素，然后当你想要为它设置动画时，使用jQuery的addClass添加一个包含比例因子的新类。

CSS：

.obj{
    width: 100px;
    height: 100px;
    background: grey;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.scale{
    -webkit-transform: scaleX(0.5);
    -o-transform: scaleX(0.5);
    -moz-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

jQuery：

$("#a_b").click(function(){
    $(".obj").addClass("scale");
});​

example