javascript - 一直使用持续时间为 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 方法替换持续时间为 0 的动画，我会得到不同的动画起点。我认为它不支持 += 或 -=，或者如果支持，它的行为会有所不同。

那么，这是执行此操作的好方法吗？什么是行业标准方式？

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 次操作
±7.48%
最快

.css();

代码:

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

最终结果:

每秒 2,477 次操作
±6.39%
慢 75%

结论

保留动画功能。事实证明使用 .css() 实际上更慢。我想这是你有 2 个额外功能的事实。这不值得。这实际上让我感到惊讶，因为我认为 .css() 会比它运行得更快。 Test this yourself在您的浏览器中!