CODEWITHSUNDEEP
jqueryjquery-uidelay
jay
jay

Reputation: 12495

Why can't I delay a remove call with jQuery

I would like for a div to fadeOut and then be removed:

 $('#div').delay(1000).fadeOut(300);
 $('#div').delay(1300).remove();

Unfortunately, this just directly removes the div, with no delays. Why is it that I can't get the remove action to be delayed? What solutions are there?

Thanks

Upvotes: 20

Views: 9431

Answers (3)

jfriend00
jfriend00

Reputation: 707876

.delay() only works with methods that go through the animation queue. Thus, it works for .fadeOut() (an animation), but not .remove() (not an animation).

To show you how specialized this is, this doesn't delay:

$('#div').delay(1000).hide();

But, this does:

 $('#div').delay(1000).hide(1);

Putting a duration on the hide method turns it into an animation which then uses the animation queue, which then works with .delay().

To remove the item with a delay, you can use a setTimeout() call:

setTimeout(function() {
    $('#div').remove();
}, 1300);

or get a bit tricky and use a completion function on an animation like this:

$('#div').delay(1000).hide(1, function() {
    $(this).remove();
});

Upvotes: 7

ZeljkoSi
ZeljkoSi

Reputation: 64

You can try something like this.

$('#div').delay(1000).fadeOut(300,function(){
    setTimeout(function(){
      $('#div').remove()
    } ,1300);

});

I think it works as it should. Hope it helps

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227310

If you want the element to be removed after it's done being faded out, you can fadeOut's callback parameter.

$('#div').delay(1000).fadeOut(300, function(){
   $(this).remove();
});

Upvotes: 39

Related Questions