jQuery affiche pendant 5 secondes puis cache

145

J'utilise .showpour afficher un message masqué après une soumission de formulaire réussie.

Comment afficher le message pendant 5 secondes puis le cacher?

jquery hide message show timed Josoroma
la source

Réponses:

351

Vous pouvez utiliser .delay()avant une animation, comme ceci:

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

Si ce n'est pas une animation, utilisez setTimeout()directement, comme ceci:

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

Vous faites la seconde parce .hide()que normalement ne serait pas dans la fxfile d'attente d' animation ( ) sans durée, c'est juste un effet instantané.

Ou, une autre option consiste à utiliser .delay()et .queue()vous - même, comme ceci:

$("#myElem").show().delay(5000).queue(function(n) {
  $(this).hide(); n();
});
Nick Craver
la source
1
La suggestion 2 fonctionnait parfaitement en affichant une icône de coche et en utilisant fadeOut () au lieu de hide (). Très bonne réponse.
Kevin Zych
2
@wilsjd Non vous ne pouvez pas, .delay()ne fonctionnera pas avec .hide()l'élément sera affiché puis immédiatement masqué. Voir ce jsFiddle c'est pourquoi Nick a déclaré "Si ce n'est pas une animation, utilisez directement setTimeout (), comme ceci: ...."
Wesley Smith
Hmm, je me demande si cela fonctionnait il y a deux ans. Bonne trouvaille cependant. Merci de me garder honnête.
wilsjd
J'ai également implémenté cela, mais lorsque j'affiche msg deux fois dans les 5 secondes, il doit masquer prev et re-show, sans réinitialiser le délai du premier
alamnaryab
18

Vous pouvez utiliser l'effet ci-dessous pour animer, vous pouvez modifier les valeurs selon vos besoins

$("#myElem").fadeIn('slow').animate({opacity: 1.0}, 1500).effect("pulsate", { times: 2 }, 800).fadeOut('slow');
Rahul
la source
1
$ (...). fadeIn (...). animate (...). effect n'est pas une fonction dans JQuery 2.1.3
Dustin Charles
@DustinCharles Ajoutez jQueryUI pas seulement jQuery. jQuery ne contient pas la fonction effect (), par exemple code.jquery.com/ui/1.12.0/jquery-ui.min.js
Rahul
0

Tout aussi simple que ceci:

$("#myElem").show("slow").delay(5000).hide("slow");
Antonio Ooi
la source