jQuery se muestra durante 5 segundos y luego se oculta

145

Estoy usando .showpara mostrar un mensaje oculto después de enviar un formulario correctamente.

¿Cómo mostrar el mensaje durante 5 segundos y luego ocultarlo?

jquery hide message show timed josoroma
fuente

Respuestas:

351

Puede usar .delay()antes de una animación, así:

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

Si no es una animación, úsela setTimeout()directamente, así:

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

Haces lo segundo porque .hide()normalmente no estaría en la fxcola de animación ( ) sin una duración, es solo un efecto instantáneo.

O, otra opción es usar .delay()y .queue()usted mismo, así:

$("#myElem").show().delay(5000).queue(function(n) {
  $(this).hide(); n();
});
Nick Craver
fuente
1
La sugerencia 2 funcionó perfectamente al mostrar un icono de marca de verificación y usar fadeOut () en lugar de hide (). Gran respuesta.
Kevin Zych
2
@wilsjd No, no puedes, .delay()no funcionará con .hide()el elemento, se mostrará e inmediatamente se ocultará. Vea este jsFiddle, esta es la razón por la cual Nick declaró "Si no es una animación, use setTimeout () directamente, así: ...."
Wesley Smith
Hmm, me pregunto si eso solía funcionar hace dos años. Buen hallazgo sin embargo. Gracias por ser honesto conmigo.
wilsjd
También he implementado esto, pero cuando muestro msg dos veces en menos de 5 segundos, entonces debería ocultar anterior y volver a presentarse, si bien no se demore restablecimiento de primera
alamnaryab
18

Puede usar el siguiente efecto para animar, puede cambiar los valores según sus requisitos

$("#myElem").fadeIn('slow').animate({opacity: 1.0}, 1500).effect("pulsate", { times: 2 }, 800).fadeOut('slow');
Rahul
fuente
1
$ (...). fadeIn (...). animar (...). efecto no es una función en JQuery 2.1.3
Dustin Charles
@DustinCharles Agregue jQueryUI no solo jQuery. jQuery no contiene la función effect (), por ejemplo, code.jquery.com/ui/1.12.0/jquery-ui.min.js
Rahul
0

Tan simple como esto:

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