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
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
});
-
5This is redundant for most jQuery animations as there are callback args on most methods, but using
promise()
orwhen()
anddone()
you can leverage some very cool behaviour from 3rd party methods, or even your own. +1 for meantioning.promise()
!– stuartcApr 5, 2012 at 8:57 -
4
-
1in 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– KristianJul 26, 2012 at 23:11
-
13Using 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.– zslaytonOct 11, 2012 at 16:21
-
6You can also chain it like this:
$(selector).fadeOut('slow').promise().done(function(){...});
– SycloneJul 25, 2014 at 22:59
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
});
-
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– uriDiumJun 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
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"?' );
} );
-
2This part of this answer using
$.when()
does not work becausemyEvent()
does not return a promise and$.when()
expects you to pass it one or more promises for it to do its job. Nov 8, 2016 at 22:31
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.