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

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