Question

I am trying to stop an animation from propagating on a call back of another animation, i have tried to stop the animation directly by adding .stop(true, true) onto the element that i wish to stop from fading but it doesn’t seem to stop the animation.

I have created a fiddle -> follow the link http://jsfiddle.net/5rEWa/

Here is the code:

$('.fadeMe').delay(3000).fadeOut(1000, function(){
        $('.meToo').fadeOut(1000);
    });


    $('#stop').click(function(){
       $('.meToo').stop(true, true);
    }); 

As always stack i am greatful for your help

Answer 1

http://jsfiddle.net/5rEWa/8/

solution is to call stop().animate({opacity:'100'}); to stop the fadeOut() animation after it has started. If you also want to be able to cancel it before it has started, you’d need to do something like this:

$(function(){
    var isCancelled = false;
    $('.fadeMe').delay(3000).fadeOut(1000, function(){
        if (!isCancelled )
            $('.meToo').fadeOut(1000);
    });

    $('#stop').click(function(){
       isCancelled = true;
       $('.meToo').stop().animate({opacity:'100'});
    });       
});