jQuery wird 5 Sekunden lang angezeigt und dann ausgeblendet

145

Ich verwende .show, um eine versteckte Nachricht nach einer erfolgreichen Formularübermittlung anzuzeigen.

Wie wird die Nachricht 5 Sekunden lang angezeigt und dann ausgeblendet?

— Josoroma
quelle

351

Sie können .delay()vor einer Animation Folgendes verwenden:

$("#myElem").show().delay(5000).fadeOut();

Wenn es sich nicht um eine Animation handelt, verwenden Sie diese setTimeout()direkt wie folgt:

$("#myElem").show();
setTimeout(function() { $("#myElem").hide(); }, 5000);

Sie machen das zweite, weil .hide()es normalerweise nicht fxohne Dauer in der Animation ( ) -Warteschlange wäre, es ist nur ein sofortiger Effekt.

Oder ist eine weitere Option zu verwenden .delay()und .queue()sich selbst, wie folgt aus :

$("#myElem").show().delay(5000).queue(function(n) {
  $(this).hide(); n();
});

— Nick Craver
quelle

1

Vorschlag 2 funktionierte perfekt mit der Anzeige eines Häkchens und der Verwendung von fadeOut () anstelle von hide (). Gute Antwort.

— Kevin Zych

2

@wilsjd Nein du kannst nicht, .delay()wird nicht mit .hide()dem Element arbeiten wird angezeigt und dann sofort ausgeblendet. Siehe diese jsFiddle aus diesem Grund sagte Nick: "Wenn es keine Animation ist, benutze setTimeout () direkt wie folgt: ...."

— Wesley Smith

Hmm, ich frage mich, ob das vor zwei Jahren funktioniert hat. Schöner Fund. Danke, dass du mich ehrlich hältst.

— Wilsjd

Ich habe dies auch implementiert, aber wenn ich msg zweimal innerhalb von 5 Sekunden zeige, sollte es prev und erneut

— anzeigen

18

Sie können den folgenden Effekt zum Animieren verwenden. Sie können die Werte gemäß Ihren Anforderungen ändern

$("#myElem").fadeIn('slow').animate({opacity: 1.0}, 1500).effect("pulsate", { times: 2 }, 800).fadeOut('slow');

— Rahul
quelle

1

$ (...). fadeIn (...). animieren (...). Effekt ist keine Funktion in JQuery 2.1.3

— Dustin Charles

@DustinCharles Fügen Sie jQueryUI hinzu, nicht nur jQuery. jQuery enthält nicht die Funktion effect (), z. B. code.jquery.com/ui/1.12.0/jquery-ui.min.js

— Rahul

0

So einfach ist das:

$("#myElem").show("slow").delay(5000).hide("slow");

— Antonio Ooi
quelle