动画 scaleX/scaleY答案

【问题标题】：Animate scaleX/scaleY动画 scaleX/scaleY
【发布时间】：2011-07-27 06:59:21
【问题描述】：

jQuery 不提供 scaleX/scaleY 过渡效果——有解决方案（插件）来做到这一点吗？

我在想这个例子：

【问题讨论】：

确实有过渡效果..看jqueryui.com/demos/effect/default.htmlDo
请先阅读问题......

标签： javascript jquery jquery-plugins animation transition

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

您还可以使用计时器 (setInterval) 并制作自己的动画。您将缩放量拆分为多个帧，然后逐帧缩放它。您还可以使用一些缓动函数来使动画更有趣。

【讨论】：

【解决方案3】：

我找到了一种使用 CSS 过渡来实现此目的的好方法。在你的元素上添加“Ease”过渡，然后当你想要动画它时，使用 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

【讨论】：

这需要 CSS3 兼容性。