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?

score 53 · Accepted Answer · answered Oct 27 '11 at 11:24

53

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

answered Oct 27 '11 at 11:24

Frédéric Hamidi

258,201
41
486
479

There is currently no way to add parameters to the queued function, is there? – CBenni Mar 20 '15 at 16:10
@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. – Frédéric Hamidi Mar 20 '15 at 16:14
1

@FrédéricHamidi I found a way to achieve what I need however: http://stackoverflow.com/questions/939032/jquery-pass-more-parameters-into-callback - "The solution is the binding of variables through closure." – CBenni Mar 20 '15 at 16:19

score 5 · Answer 2 · answered Oct 27 '11 at 11:23

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

Grant Thomas · Answer 3 · 2011-10-27T11:28:21.927

-1

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.

edited Oct 27 '11 at 11:28

answered Oct 27 '11 at 11:22

Grant Thomas

44,454
10
85
129

2

I was sure `.delay` worked only with animation stuff. I mean, wouldn't it remove the `$image` instantly? – Lapple Oct 27 '11 at 11:26
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. – Frédéric Hamidi Oct 27 '11 at 11:26
@Honneykeepa You can specify the queue on which the delays occur - it defaults to `fx`. – Grant Thomas Oct 27 '11 at 11:27
@Mr.Disappointment: I don't think this works. The image gets removed immediately. See http://jsfiddle.net/ntzs4/ – Randomblue Oct 27 '11 at 11:33
@Randomblue That's because `queue` is queuing the `fx` calls, you'll need to specify your queue. – Grant Thomas Oct 27 '11 at 11:42
@Mr.Disappointment: I'm a little confused. Could you please provide a working example? Ideally, jsfiddle. – Randomblue Oct 27 '11 at 11:56
@Randomblue Here is a working example with an explicit queue, much like Frédéric's implementation: http://jsfiddle.net/ntzs4/1/ – Grant Thomas Oct 27 '11 at 12:10

Callback to .delay()

3 Answers3

Linked

Related