Javascript 通过用户交互中断动画序列

我有一系列的动画，如果用户不中断，应该一直完成到最后。动画是使用延迟来实现的。比如说

$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（：动画）选择上使用.stop（false，true）函数$element1和$element2确实被中断并跳转到结束状态，但由于$element3和$element4仍处于.delay阶段，因此它们不会受到影响

---

要达到我想要的效果，最好最简单的方法是什么？谢谢

我想您正在寻找最近推出的

finish（）

方法。如果将

stop（）

的jumpToEnd参数设置为true，则它只会影响队列中当前处理的项目。但是如果调用

finish（）

，它将跳转到整个队列的最终结果

小提琴：

jQuery 1.9中引入了

Finish（）

，但后来在1.10.1中修复了一些错误，因此您可能希望使用该版本及更高版本

在jQuery的早期版本中，我认为您可以循环遍历队列长度，并对队列中的每个项目调用

stop（false，true）