可以一直使用0持续时间的.animate吗？还有更好的选择吗？

Question

我已经习惯于通过以下操作编写jquery动画代码。

1. 设置元素的初始状态(如宽度、高度、顶部、左侧、不透明度等)使用css或javascript。这个初始状态是动画的端处的状态。
2. 使用具有0持续时间的.animate将元素移动到动画开头元素所在的状态。
3. 使用具有适当持续时间的常规.animate来执行动画，在动画中，元素在步骤1中返回状态。

下面是一个例子。

/* css file */
.animatedObject
{
    width:60%;
}

// javascript file
$('.animatedObject')
    .animate({width: '-=20%'}, 0)
    .animate({width: '+=20%'}, 1000);

至少对我来说，使用这段代码有几个优点。首先，在我看来，我很清楚我想要的是什么。其次，如果禁用了javascript，对象将处于动画的结束状态，这通常是我希望它优雅退化的地方。第三，对象可以稍微改变位置，以便使用css进行调整，而动画看起来仍然大致相同。

我不使用.css的原因是，如果我尝试用.css方法替换动画的持续时间，就会得到不同的动画起点。我不认为它支持+=或-=，如果支持，它的行为也会有所不同。

这是个很好的方法吗？行业标准是什么？

Answer 1

你还可以用.css()

var anObj = $('.animatedObject');
anObj.css("width", anObj.css("width") - (20 / anObj.css("width"))).animate({
    width: '+=20%'
}, 1000);

我相信这样会更快。

编辑：

我使用jsperf.com为您做了一个小小的基准测试。以下是我的结果(使用Google Chrome)：

.animate({}, 0)

代码：

$('.animatedObject')
    .animate({width: '-=20%'}, 0)
    .animate({width: '+=20%'}, 1000);

最终结果：

10,013 operations per second

±7.48%

fastest

.css();

代码：

var anObj = $('.animatedObject');
anObj.css("width", anObj.css("width") - (20 / anObj.css("width"))).animate({
    width: '+=20%'
}, 1000);

最终结果：

2,477 operations per second

±6.39%

75% slower

结论

保留动画功能。事实证明，使用.css()实际上要慢一些。我想是因为你有两个额外的功能。这不值得。这对我来说是个惊喜，因为我认为.css()的运行速度会比它快。你自己试一下在你的浏览器里！