CODEWITHSUNDEEP
jqueryappenddelay
matt
matt

Reputation: 44373

jQuery: append() object, remove() it with delay()

what's wrong with that?

$('body').append("<div class='message success'>Upload successful!</div>");
$('.message').delay(2000).remove();

I want to append a success message to my html document, but only for 2sec. After that the div should be deleted again.

what am i doing wrong here?

regards

Upvotes: 43

Views: 65123

Answers (4)

Viktor Kruglikov
Viktor Kruglikov

Reputation: 527

I think that correct way of doing that is to use jQuery queue method:

    $("<div class='message success'>Upload successful!</div>")
        .appendTo('body')
        .delay(2000)
        .queue(function() {
            $(this).remove();
        });

Upvotes: 9

WSkid
WSkid

Reputation: 2786

Maybe I'm using an outdated jQuery, but none of the methods suggested in other answers seem to work for me. According to http://api.jquery.com/delay/ , delay is for animation effects.

Using setTimeout() however, works nicely for me:

$('body').append("<div class='message success'>Upload successful!</div>"); 
setTimeout(function(){
    $(".message").remove();
}, 2000);

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630569

Using setTimeout() directly (which .delay() uses internally) is simpler here, since .remove() isn't a queued function, overall it should look like this:

$('body').append("<div class='message success'>Upload successful!</div>");
setTimeout(function() {
  $('.message').remove();
}, 2000);

You can give it a try here.

.delay() is for the animation (or whatever named) queue, to use it you'd have to do something like:

$("<div class='message success'>Upload successful!</div>").appendTo('body')
  .delay(2000).queue(function() { $(this).remove(); });

Which works, here...but is just overkill and terribly inefficient, for the sake of chaining IMO. Normally you'd also have to call dequeue or the next function as well, but since you're removing the element anyway...

Upvotes: 119

Strelok
Strelok

Reputation: 51461

And just for kicks, you could do the following, using delay:

$('body').append("<div class='message success'>Upload successful!</div>");
$('.message').show('fast').delay(2000).hide('fast')
$('.message').remove();

Upvotes: 0

Related Questions