jQuery: interrupting fadeIn()/fadeOut()

Question

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?

Answer 1

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

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

Answer 2

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/

Answer 3

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.

Answer 4

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

Answer 5

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.

Answer 6

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>

Answer 7

Try taking animation out from queue.

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

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

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