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?

Shock

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

Ellingston

There is currently no way to add parameters to the queued function, is there? – Retrogressive

@CBenni, indeed there isn't. You can call functions with arbitrary parameters from the queued function, but you cannot specify additional parameters to the queued function itself. – Ceric

@FrédéricHamidi I found a way to achieve what I need however: #939532 - "The solution is the binding of variables through closure." – Retrogressive

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

Fiji

Answer 3

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.

Dilks

I was sure .delay worked only with animation stuff. I mean, wouldn't it remove the $image instantly? – Fiji

The example only works because fadeIn() queues an animation to be run after the delay. remove() does not queue anything (it executes synchronously), so the element will be removed from the DOM immediately, without waiting for the animation queue to complete. – Ceric

@Honneykeepa You can specify the queue on which the delays occur - it defaults to fx. – Dilks

@Mr.Disappointment: I don't think this works. The image gets removed immediately. See jsfiddle.net/ntzs4 – Shock

@Shock That's because queue is queuing the fx calls, you'll need to specify your queue. – Dilks

@Mr.Disappointment: I'm a little confused. Could you please provide a working example? Ideally, jsfiddle. – Shock

@Shock Here is a working example with an explicit queue, much like Frédéric's implementation: jsfiddle.net/ntzs4/1 – Dilks