jQuery: append() de l'objet, supprimer (), avec un délai de()
quel est le problème avec ça?
$('body').append("<div class='message success'>Upload successful!</div>");
$('.message').delay(2000).remove();
je veux ajouter un message de succès à mon document html, mais seulement pour 2sec. Après cela le div devrait être supprimé à nouveau.
ce que je fais mal?
cordialement
4 réponses
en utilisant setTimeout() directement (.delay() utilise en interne) est plus simple ici, car .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);
.delay() pour 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(); });
Qui fonctionne, ici...mais il est juste trop de travail et terriblement inefficace, pour enchaîner IMO. Normalement, vous devez aussi appeler dequeue ou la fonction suivante, mais puisque vous retirez l'élément de toute façon...
je pense que la bonne façon de le 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();
});
peut-être que j'utilise un jQuery périmé, 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 retard pour les effets d'animation.
en utilisant setTimeout() toutefois, fonctionne très bien pour moi:
$('body').append("<div class='message success'>Upload successful!</div>");
setTimeout(function(){
$(".message").remove();
}, 2000);
Et juste pour le plaisir, vous pouvez effectuer les opérations suivantes, à l'aide de retard:
$('body').append("<div class='message success'>Upload successful!</div>");
$('.message').show('fast').delay(2000).hide('fast')
$('.message').remove();