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