jquery - 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();
      });