jQuery的 - 中断动画？ [英] jQuery - Interrupt animation?

问题描述

我使用jQuery对于一些简单的动​​画效果，一旦用户点击的东西。但是，如果他们的第一个动画完成之前再次点击，没有任何反应。他们必须等待，直到第一个动画结束。

I'm using jQuery for some simple animation effects once user clicks something. However, if they click again before the first animation has completed, nothing happens. They must wait until the first animation has finished.

有没有办法中断动画制作过程，并从头开始，当第二次单击发生？

Is there a way to interrupt the animation process and begin from scratch when a second click occurs?

感谢。

推荐答案

您可以使用停止（）法

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(); });

编辑：上面code进行测试，并在FF3.5和IE8的作品

edit: The above code is tested and works in FF3.5 and IE8

使用的元素，你想打断的动画。

Use that on the element that you would like to interrupt the animation of.

请记住，该元素将停止动画中期的动画。所以，你可能需要停止后的CSS复位，根据您的情况。

Just remember that the element will stop animating mid-animation. So you might need to reset the CSS after the stop, depending on your circumstances.

EDIT2：在jQuery 1.7的出现了一些更新。现在，您可以组动画队列，名称。因此，停止（）方法将接受一个布尔值或字符串作为第一个参数。如果它是一个布尔值，它会清除/不明确的所有的队列。但是，如果你提供一个字符串，那么它只会清除队列组中的动画。

edit2: As of jQuery 1.7 there has been some updates. You can now group animation queues with names. So the stop() method will accept a boolean or a string as first parameter. If it's a boolean, it will clear/not clear all queues. But if you supply a string, then it will only clear the animations in that queue group.

这篇关于jQuery的 - 中断动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！