jQuery - Interrupt animation?

Question

Hi, 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.

Answer 2

Sounds like a job for dequeue.

Answer 3

you can just stop() before relaunching the animation

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