web-dev-qa-db-fra.com

jQuery: objet append (), remove () le avec delay ()

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

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

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

qu'est-ce que je fais mal ici?

cordialement

jqueryappenddelay
37
matt

Utiliser setTimeout() directement (que .delay() utilise en interne) est plus simple ici, puisque .remove() n’est pas une fonction en file d’attente, l’ensemble devrait ressembler à ceci:

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

Vous pouvez essayer ici .

.delay() est pour la file d’animation (ou le nom de celui-ci). Pour l’utiliser, vous devez 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 tout simplement excessif et terriblement inefficace, dans l'intérêt de l'enchaînement de l'OMI. Normalement, vous devez également appeler dequeue ou la fonction suivante également, mais puisque vous supprimez l'élément de toute façon ...

93
Nick Craver

Je pense que la bonne façon de faire est d’utiliser la méthode de la file d’attente jQuery:

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

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

Cependant, utiliser setTimeout() fonctionne bien pour moi:

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

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

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