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?

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

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

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");
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.