jQuery - Interrupt animation?

Question

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?

Thanks.

Answer 1

you could use the stop() method

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

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.

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: 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.

Answer 2

you can just stop() before relaunching the animation

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