webentwicklung-frage-antwort-db.com.de

jQuery: Objekt append (), remove () mit delay ()

was stimmt damit nicht?

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

Ich möchte eine Erfolgsmeldung an mein HTML-Dokument anhängen, jedoch nur für 2 Sekunden .. _. Danach sollte das div wieder gelöscht werden.

was mache ich hier falsch?

grüße

37
matt

Die direkte Verwendung von setTimeout() (die .delay() / intern verwendet) ist hier einfacher, da .remove() keine Funktion in der Warteschlange ist. Im Allgemeinen sollte es so aussehen:

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

Sie können es hier versuchen .

.delay() ist für die Warteschlange für Animationen (oder wie auch immer benannt). Um sie zu verwenden, müssten Sie Folgendes tun:

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

Was hier funktioniert ... aber es ist einfach übertrieben und für die Verkettung von IMO furchtbar ineffizient. Normalerweise müsstest du auch dequeue oder die nächste Funktion aufrufen, aber da du das Element sowieso entfernst ...

93
Nick Craver

Ich denke, die korrekte Methode ist die Verwendung der Warteschlangenmethode jQuery:

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

Vielleicht verwende ich eine veraltete jQuery, aber keine der in anderen Antworten vorgeschlagenen Methoden scheint für mich zu funktionieren. Gemäß http://api.jquery.com/delay/ ist die Verzögerung für Animationseffekte.

Die Verwendung von setTimeout() funktioniert jedoch gut für mich:

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

Und nur für Tritte können Sie mit Verzögerung Folgendes tun:

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