通过用户交互中断一系列动画

Question

我有一系列动画，如果用户没有中断应该完成直到结束。动画是使用延迟实现的。例如

$element1.delay(1000).animate({left: 1000}, 5000);
$element2.delay(2000).animate({left: 1000}, 5000);
$element3.delay(3000).animate({left: 1000}, 5000);
$element4.delay(4000).animate({left: 1000}, 5000);

我这样做的原因是因为这对我来说似乎很直观，因为每个动画完全独立于其他动画的时间。

假设我希望在2500ms标记处中断动画，并且一旦被中断，元素必须跳到动画状态的末尾。现在，我尝试在.find（：animated）选项上使用.stop（false，true）函数。 $ element1和$ element2确实被中断并跳转到结束状态，但由于$ element3和$ element4仍处于.delay阶段，因此它们不受影响。

实现我想要的效果的最佳和最简单的方法是什么？感谢

Answer 1

我认为您正在寻找最近推出的finish()方法。如果将stop()的jumpToEnd参数设置为true，则它只会影响队列中当前处理的项目。但是如果你调用finish()，它将跳转到整个队列的最终结果。

小提琴：http://jsfiddle.net/SnTgS/

Finish()是在jQuery 1.9中引入的，但稍后在1.10.1中修复了一些错误，因此您可能希望使用该版本和更新版本。

http://api.jquery.com/finish/

在早期版本的jQuery中，我想你可以遍历队列长度并在队列中的每个项目上调用stop(false, true)。