Callback to .delay()

Question

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

Answer 1

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

Answer 2

To my knowledge, you can just strap the calls on after the delay call, like this:

$image
   .fadeIn()
   .fadeOut()
   .delay(1000)
   .remove()
});

Such as in the following example from the documentation:

$('#foo').slideUp(300).delay(800).fadeIn(400);

The temperament of queued items execution spelled out there also:

...the .delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

Read the documentation for further information regarding which queue you're delaying, if you have troubles with the default fx queue you might need to specify one.

Answer 3

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