用用户交互中断动画序列

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); 

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

假设我希望在2500毫秒标记处中断动画，并且一旦中断，元素必须跳到其动画状态的末尾。现在，我尝试在.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)在队列中。