118

I am sure I read about this the other day but I can't seem to find it anywhere.
I have a fadeOut() event after which I remove the element, but jQuery is removing the element before it has the chance to finish fading out.
How do I get jQuery to wait until the element had faded out, then remove it?

4 Answers 4

196

With jQuery 1.6 version you can use the .promise() method.

$(selector).fadeOut('slow');
$(selector).promise().done(function(){
    // will be called when all the animations on the queue finish
});
8
  • 5
    This is redundant for most jQuery animations as there are callback args on most methods, but using promise() or when() and done() you can leverage some very cool behaviour from 3rd party methods, or even your own. +1 for meantioning .promise()!
    – stuartc
    Apr 5, 2012 at 8:57
  • 4
    Haven't heard this before, just saved my butt.
    – prismspecs
    Jun 26, 2012 at 14:58
  • 1
    in my case, I was trying to access the current animation of an element that was happening somewhere else in my code, and thus I didn't have access to it's callback. +1
    – Kristian
    Jul 26, 2012 at 23:11
  • 13
    Using promise() also allows you to set up a single callback for when everything's done. If you call fadeOut() on a set of 10 things, there will be one callback for each thing with 'this' set to the appropriate scope. If you only want to fire once, this function is really helpful. Also: If you animate on a selector that turns out to match zero elements, the normal callback will never fire. Promise() will fire at the end no matter what.
    – zslayton
    Oct 11, 2012 at 16:21
  • 6
    You can also chain it like this: $(selector).fadeOut('slow').promise().done(function(){...});
    – Syclone
    Jul 25, 2014 at 22:59
178

You can specify a callback function:

$(selector).fadeOut('slow', function() {
    // will be called when the element finishes fading out
    // if selector matches multiple elements it will be called once for each
});

Documentation here.

3
  • Bingo. I thought it was that but what I needed to do was put my entire function in there not just the remove part. P.S. If any one is interested the book I read it in and have now found again is Learning JQuery - Better Interaction and Design. Thanks again
    – uriDium
    Jun 30, 2009 at 20:23
  • If someone has old jQuery, then this "animation done callback" bug was a nasty one: bugs.jquery.com/ticket/5684 May 23, 2014 at 16:03
  • This actually solves quite a delicate problem with fading - if you have any kind of CSS transition on the element, the fadeIn() function doesn't work properly. You can combat it by doing: $(this).addClass('disabled-transitions'); and right after that $(this).fadeIn(500, function() {$(this).removeClass('disabled-transitions');}); Apr 16, 2021 at 12:23
10

You can as well use $.when() to wait until the promise finished:

var myEvent = function() {
    $( selector ).fadeOut( 'fast' );
};
$.when( myEvent() ).done( function() {
    console.log( 'Task finished.' );
} );

In case you're doing a request that could as well fail, then you can even go one step further:

$.when( myEvent() )
    .done( function( d ) {
        console.log( d, 'Task done.' );
    } )
    .fail( function( err ) {
        console.log( err, 'Task failed.' );
    } )
    // Runs always
    .then( function( data, textStatus, jqXHR ) {
        console.log( jqXHR.status, textStatus, 'Status 200/"OK"?' );
    } );
1
  • 2
    This part of this answer using $.when() does not work because myEvent() does not return a promise and $.when() expects you to pass it one or more promises for it to do its job.
    – jfriend00
    Nov 8, 2016 at 22:31
6

if its something you wish to switch, fading one out and fading another in the same place, you can place a {position:absolute} attribute on the divs, so both the animations play on top of one another, and you don't have to wait for one animation to be over before starting up the next.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.