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?

— josoroma
fuente

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