一旦用户点击某事,我就使用jQuery进行一些简单的动画效果.但是,如果在第一个动画完成之前再次单击,则不会发生任何反应.他们必须等到第一个动画完成.
有没有办法中断动画过程,并在第二次点击发生时从头开始？
谢谢.
解决方法
你可以使用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.
编辑2：从jQuery 1.7开始,已经有一些更新.您现在可以使用名称分组动画队列.因此,stop()方法将接受一个布尔值或一个字符串作为第一个参数.如果它是一个布尔值,它将清除/不清除所有队列.但是如果您提供一个字符串,那么它只会清除该队列组中的动画.
