restart jquery.fadeOut() while it's fading out

Question

I'd like to have a jquery fadeOut() restart whilst it's in the middle of fading out.

I have the following statement

$('#status').html('<div style="padding:5px; margin:0 0 0 200px;"><img src="/images/done.png" /> ' + message + '</div>').show().fadeOut(2000);

When a user performs an action, this statement gets run. for the 2 seconds it's running, the user can perform another action which calls this statement.

At the moment, the fadeOut has to complete before the fadeOut animation will play again.

Is there a way to make the fadeOut simply restart from the beginning again?

Answer 1

Use .stop() before calling .fadeOut().

Optionally, use .stop(true, true) if you want it to start from the destination values.

Answer 2

You can call stop before calling fadeOut. That will restart the fadeOut animation. Otherwise, the second fadeOut will be queued after the first one.

Answer 3

How do you cancel a jQuery fadeOut() once it has began?

In short, call the .stop() method.

Answer 4

Use

jQuery.stop().fadeOut() 

to prevent queueing up the fadeOut Animation.

.stop() can be used to prevent queueing any jQuery Animation 

http://api.jquery.com/stop/