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

Question

I have a basic div element to represent a message that I show for a few seconds and then fade it out using

$(\'#message\').fadeOut(5000);

I

Answer 1

Check out the stop function

http://docs.jquery.com/Effects/stop#clearQueuegotoEnd

Answer 2

Also, you can test if an element is in the middle of an animation using the :animated selector:

$('#message').mouseover(
    function () {
      if($(this).is(':animated')) {
         $(this).stop().animate({opacity:'100'});
      }
    }
);

Answer 3

In my case stop() merely didn't work at least in Firefox, after searching I figured out that It should be stop(true, true):

$('#message').mouseover(
    function () {
         $(this).stop(true, true).fadeOut();
    }
);

stop(): Stops the currently-running animation on the matched elements.

or even you can use finish() instead:

$('#message').mouseover(
    function () {
         $(this).finish().fadeOut();
    }
);

but there is a side effect about finish(), it stops all other running animations too.

finish(): Stops the currently-running animation, remove all queued animations, and complete all animations for the matched elements.

Read more here.