jQuery pokaż przez 5 sekund, a następnie ukryj

145

używam .show do wyświetlania ukrytej wiadomości po pomyślnym przesłaniu formularza.

Jak wyświetlić wiadomość przez 5 sekund, a następnie ukryć?

jquery hide message show timed josoroma
źródło

Odpowiedzi:

351

Możesz użyć .delay()przed animacją, na przykład:

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

Jeśli to nie jest animacja, użyj setTimeout()bezpośrednio, na przykład:

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

Robisz drugą, ponieważ .hide()normalnie nie byłoby w animacji (fx kolejce ) bez czasu trwania, to tylko natychmiastowy efekt.

Lub inną opcją jest użycie .delay()i .queue()siebie, na przykład:

$("#myElem").show().delay(5000).queue(function(n) {
  $(this).hide(); n();
});
Nick Craver
źródło
1
Sugestia 2 działała doskonale z pokazaniem ikony znacznika wyboru i użyciem fadeOut () zamiast hide (). Świetna odpowiedź.
Kevin Zych,
2
@wilsjd Nie, nie możesz, nie .delay()będzie działać z .hide()elementem zostanie wyświetlony, a następnie natychmiast ukryty. Zobacz to jsFiddle, dlatego Nick powiedział: „Jeśli to nie jest animacja, użyj bezpośrednio setTimeout (), na przykład: ....”
Wesley Smith
Hmm, zastanawiam się, czy to działało dwa lata temu. Niezłe znalezisko. Dzięki, że zachowałeś mnie uczciwie.
wilsjd
Ja też to zaimplementowałem, ale kiedy pokażę msg dwa razy w ciągu 5 sekund, to powinno ukryć prev i ponownie pokazać, podczas gdy nie resetuje opóźnienia pierwszego
alamnaryab
18

Możesz użyć poniższego efektu do animacji, możesz zmienić wartości zgodnie ze swoimi wymaganiami

$("#myElem").fadeIn('slow').animate({opacity: 1.0}, 1500).effect("pulsate", { times: 2 }, 800).fadeOut('slow');
Rahul
źródło
1
$ (...). fadeIn (...). animate (...). effect nie jest funkcją w JQuery 2.1.3
Dustin Charles
@DustinCharles Dodaj jQueryUI nie tylko jQuery. jQuery nie zawiera funkcji effect (), np. code.jquery.com/ui/1.12.0/jquery-ui.min.js
Rahul
0

Tak proste, jak to:

$("#myElem").show("slow").delay(5000).hide("slow");
Antonio Ooi
źródło