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ć?

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();
});

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'); 

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.