jQuery show pendant 5 secondes, puis masquer

Je suis en utilisant .show pour afficher un message caché après le succès d'un formulaire de soumission.

Comment afficher le message pendant 5 secondes puis se cacher?

InformationsquelleAutor josoroma | 2010-08-07
  1. 324

    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 le deuxième parce que .hide() ne seraient normalement pas sur l'animation (fx) de la file d'attente sans durée, c'est juste un effet immédiat.

    Ou, une autre option est d'utiliser .delay() et .file() vous-même, comme ceci:

    $("#myElem").show().delay(5000).queue(function(n) {
  $(this).hide(); n();
});
    • D'excellentes solutions
    • Suggestion 2 a fonctionné parfaitement avec montrant une icône de coche et à l'aide de fadeOut() au lieu de les masquer(). Grande réponse.
    • Vous pouvez également faire $("#myElem").show().delay(5000).hide();
    • Non, vous ne pouvez pas, .delay() ne fonctionnera pas avec .hide() l'élément sera affiché alors immédiatement caché. Voir ce jsFiddle c'est pourquoi Nick a déclaré que "Si ce n'est pas une animation, utiliser setTimeout() directement, comme ceci:...."
    • Hmm, je me demande si c'utilisé pour le travail il y a deux ans. Jolie trouvaille bien. Merci de me garder honnête.
    • J'ai également mis en œuvre, mais quand je vois ce msg deux fois dans les 5 secondes, puis elle devrait se cacher prev et re-show, alors qu'il ne réinitialisez pas le délai des premiers

    InformationsquelleAutor Nick Craver
  2. 16

    Vous pouvez utiliser la sous l'effet d'animer, vous pouvez modifier les valeurs selon vos besoins

    $("#myElem").fadeIn('slow').animate({opacity: 1.0}, 1500).effect("pulsate", { times: 2 }, 800).fadeOut('slow');
    • $(...).fadeIn(...).animer(...).l'effet n'est pas une fonction JQuery 2.1.3
    InformationsquelleAutor Rahul