CODEWITHSUNDEEP
javascriptjqueryfade
JamesBrownIsDead
JamesBrownIsDead

Reputation: 191

jQuery: interrupting fadeIn()/fadeOut()

Let's say I've called $element.fadeIn(200). 100 ms later, something happens on that page and I want to interrupt that fade and immediately fadeOut(). How can I do this?

If you call calling $element.fadeIn(200).fadeOut(0), the fadeOut() only happens after the fadeIn() has finished.

Also, is there a way I can examine $element to determine if a fadeIn() or fadeOut() is running? Does $element have any .data() member that changes?

Upvotes: 19

Views: 8029

Answers (8)

Vincent
Vincent

Reputation: 2149

Adding .stop(true,true) prior to the fadeIn will interrupt any current animations and execute the fadeIn immediately.

$('.saved').stop(true, true).fadeIn().delay(400).fadeOut(4000);

Upvotes: 0

K. Kilian Lindberg
K. Kilian Lindberg

Reputation: 2976

Another working example

<div id="fadediv">Yay, I like to fade</div>
<button id="stopdatfade" >Stop that fade!</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
(function($){ 

    currentfade = $("#fadediv").fadeOut(5000).fadeIn(5000).fadeOut(5000).fadeIn(5000); 
    $('#stopdatfade').on('click', function () { 
        if (typeof currentfade !== 'undefined') { 

            currentfade.stop(true, true);

        } 

    }); 
})(jQuery);
</script>

Upvotes: 0

Flash Thunder
Flash Thunder

Reputation: 12036

You will get smooth fadeIn/Out effect by clearing queue but not jumping to the end, using .stop(true,false), but please notice that as FadeIn can be interrupted this way, FadeOut can not. I reported it as a bug like years ago, but noone cared. FadeIn only works if the object is hidden. But there is workaround... use FadeTo instead - it works on hidden as well as partially faded objects:

    $('.a').hover(function(){
    $('.b').stop(true,false).fadeTo(3000,1); // <- fadeTo(), not FadeIn() (!!!)
},function(){
    $('.b').stop(true,false).fadeOut(3000);
});

Here's how it works: http://jsfiddle.net/dJEmB/

Upvotes: 5

Andre Schweighofer
Andre Schweighofer

Reputation: 2759

stop() will only remove animations that are not executed yet.

use stop(true, true) to interrupt and remove the current animation too!

Upvotes: 32

Mechlar
Mechlar

Reputation: 4974

Its always a good practice to keep functions that deal with an animation etc inside the function's callback. You can tell if the fadeIn() has finished by doing your function from within its callback, like:

$element.fadeIn(200, function(){
   //do callback
});

If that is not possible then you can declare a variable outside the function. Say, var elmFadeInRunning = false. Change it to true right before you call fadeIn and change it back to false in the callback of the fadeIn. That way you can know if its still running if elmFadeInRunning == true.

Upvotes: 1

Rassel
Rassel

Reputation: 33

You can use the stop() function to interrupt any animation that takes place during that particular moment. Let me know if this works.

Upvotes: 1

Cristian Sanchez
Cristian Sanchez

Reputation: 32107

AFAIK fadeIn and fadeOut run synchronously, so no, I do not think you can interrupt them while they are running. You would have to wait until it is done executing.

If you call the stop method on the element it will stop all animations. The reason the fadeOut call in your example isn't called until after fadeIn is because animations are executed in a queue-like fashion.

Upvotes: 2

Otar
Otar

Reputation: 2591

Try taking animation out from queue.

$('...').fadeIn(200).dequeue().fadeOut(0);

http://api.jquery.com/queue/

http://api.jquery.com/dequeue/

Upvotes: -1

Related Questions