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()方法将接受布尔值或字符串作为第一个参数。如果它是布尔值，它将清除/不清除所有队列。但是如果你提供一个字符串，那么它只会清除该队列组中的动画。

Answer 2

你可以在重新启动动画之前停止（）

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

Answer 3

听起来像是dequeue的工作。

jQuery - 中断动画？

3 个答案: