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

Question

Qu'est-ce qui ne va pas avec ça?

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

Je veux ajouter un message de réussite à mon document html, mais uniquement pour 2sec. Après cela, le div doit être supprimé à nouveau.

qu'est-ce que je fais mal ici?

Cordialement

Answer 1

À l'aide de setTimeout() directement (ce qui .delay() utilise en interne) est plus simple ici, depuis .remove() n'est pas une file d'attente de la fonction, l'ensemble, il devrait ressembler à ceci:

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

Vous pouvez l'essayer ici.

.delay() est de l'animation (ou peu importe le nom) de la file d'attente, pour l'utiliser, vous avez à faire quelque chose comme:

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

Ce qui fonctionne, ici...mais est un peu exagéré, et terriblement inefficace, pour l'amour de chaînage de l'OMI. Normalement il faudrait aussi appel en file d'attente ou la fonction suivante en tant que bien, mais depuis que vous êtes en train de retirer l'élément de toute façon...

Answer 2

J'utilise peut-être un jQuery obsolète, mais aucune des méthodes suggérées dans d'autres réponses ne semble fonctionner pour moi. Selon http://api.jquery.com/delay/ , le retard est pour les effets d'animation.

Cependant, utiliser setTimeout() fonctionne bien pour moi:

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

Answer 3

Et juste pour les coups de pied, vous pouvez faire ce qui suit, en utilisant le retard:

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