jQuery - 中断动画？

Question

当用户点击某些东西时，我使用 jQuery 来实现一些简单的动画效果。但是，如果他们在第一个动画完成之前再次单击，则不会发生任何情况。他们必须等到第一个动画完成。

有没有办法在第二次单击发生时中断动画过程并从头开始？

谢谢。

Answer 1

您可以使用stop()方法

HTML:

<input type="button" value="fade out" id="start">
<input type="button" value="stop" id="stop">
<div style="background-color: blue; height: 100px;">Testing</div>

JS:

$("#start").click(function() { $("div").fadeOut("slow"); });
$("#stop").click(function() { $("div").stop(); });

编辑:以上代码经过测试，可在 FF3.5 和 IE8 中运行

在您想要中断动画的元素上使用它。

请记住，该元素将在动画中停止动画。因此，您可能需要在停止后重置 CSS，具体取决于您的情况。

edit2:从 jQuery 1.7 开始，已经有了一些更新。您现在可以使用名称对动画队列进行分组。因此 stop() 方法将接受 bool 值或字符串作为第一个参数。如果它是一个 bool 值，它将清除/不清除所有队列。但如果您提供一个字符串，那么它只会清除该队列组中的动画。