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?

— Josoroma
source

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
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
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
source