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?

score 6 · Accepted Answer · answered Jan 05 '11 at 15:41

6

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

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

answered Jan 05 '11 at 15:41

wildpeaks

7,273
2
30
35

thanks :D i had to make a slight modification. I had to call $('#status').stop(true, true); BEFORE running the status statement – sf. Jan 05 '11 at 15:48

score 1 · Answer 2 · answered Aug 22 '13 at 06:10

1

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/

answered Aug 22 '13 at 06:10

cgupta

307
3
4

score 1 · Answer 3 · answered Jan 05 '11 at 15:41

1

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

answered Jan 05 '11 at 15:41

Antoine Aubry

12,203
10
45
74

score 1 · Answer 4 · edited May 23 '17 at 12:23

1

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

In short, call the .stop() method.

edited May 23 '17 at 12:23

Community

1
1

answered Jan 05 '11 at 15:41

simshaun

21,263
1
57
73

score 0 · Answer 5 · answered Sep 12 '17 at 21:08

0

It's strange, but in my case better way was

//onclick 
  .stop(true, true).fadeIn().stop(true, true); //reset: stop old fadeOut and make visible again
  .fadeOut(); //again

answered Sep 12 '17 at 21:08

DantaliaN

155
10

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

5 Answers5