Callback to .delay()

Question

I have an $image that I .fadeIn and .fadeOut, and then .remove after .fadeOut completes. This is my code:

$image    .fadeIn()    .fadeOut(function() {       $(this).remove();    }); 

I want to add a .delay after .fadeOut, and .remove the $image only once .delay has completed. I have tried:

$image    .fadeIn()    .fadeOut()    .delay(1000, function() {       $(this).remove();    }); 

The problem is that .delay doest not accept a callback function. How can I .remove the picture as a callback to .delay?

Answer 1

You can use the queue() method to schedule your own function to run after delay() completes:

$image.fadeIn()       .fadeOut()       .delay(1000)       .queue(function(next) {           $(this).remove();           next();       }); 

Answer 2

You can always do it as:

$image     .fadeIn()     .fadeOut(function() {         var self = this; // Not sure if setTimeout                          // saves the pointer to this         setTimeout(function() {             $(self).remove();         }, 1000)     });