¿Cómo esperar 5 segundos con jQuery?

Intento crear un efecto donde se cargue la página, y luego de 5 segundos, el mensaje de éxito en la pantalla se desvanece o se desliza hacia arriba.

¿Cómo puedo conseguir esto?

Construido en javascript setTimeout .

setTimeout( function() { //do something special }, 5000); 

ACTUALIZACIÓN : desea esperar ya que cuando la página ha terminado de cargarse, coloque ese código dentro de su $(document).ready(...); guión.

ACTUALIZACIÓN 2 : jquery 1.4.0 introdujo el método .delay . Compruébalo . Tenga en cuenta que .delay solo funciona con las colas de efectos de jQuery.

Use un temporizador de javascript normal:

 $(function(){ function show_popup(){ $("#message").slideUp(); }; window.setTimeout( show_popup, 5000 ); // 5 seconds }); 

Esto esperará 5 segundos después de que el DOM esté listo. Si desea esperar hasta que la página esté realmente loaded , necesita usar esto:

 $(window).load(function(){ function show_popup(){ $("#message").slideUp(); }; window.setTimeout( show_popup, 5000 ); // 5 seconds }) 

EDITAR: En respuesta al comentario del OP que pregunta si hay una manera de hacerlo en jQuery y no usa setTimeout la respuesta es no. Pero si quisieras hacer más “jQueryish” podrías envolverlo así:

 $.wait = function( callback, seconds){ return window.setTimeout( callback, seconds * 1000 ); } 

Entonces podrías llamarlo así:

 $.wait( function(){ $("#message").slideUp() }, 5); 

Me encontré con esta pregunta y pensé en proporcionar una actualización sobre este tema. jQuery (v1.5 +) incluye un modelo Deferred , que (a pesar de no cumplir con la especificación de Promises / A hasta jQuery 3) generalmente se considera una forma más clara de abordar muchos problemas asincrónicos. Implementar un $.wait() usando este enfoque es particularmente legible, creo:

 $.wait = function(ms) { var defer = $.Deferred(); setTimeout(function() { defer.resolve(); }, ms); return defer; }; 

Y así es como puedes usarlo:

 $.wait(5000).then(disco); 

Sin embargo, si, después de pausar, solo deseas realizar acciones en una única selección de jQuery, entonces deberías estar usando .delay() nativo de .delay() que creo que también usa Deferred’s under the hood:

 $(".my-element").delay(5000).fadeIn(); 
 setTimeout(function(){ },5000); 

Coloque su código dentro del { }

 300 = 0.3 seconds 700 = 0.7 seconds 1000 = 1 second 2000= 2 seconds 2200 = 2.2 seconds 3500 = 3.5 seconds 10000 = 10 seconds 

etc.

He estado usando este para una superposición de mensajes que se puede cerrar inmediatamente al hacer clic o se cierra automáticamente después de 10 segundos.

 button = $('.status-button a', whatever); if(button.hasClass('close')) { button.delay(10000).queue(function() { $(this).click().dequeue(); }); } 

La biblioteca Underscore también proporciona una función de “retraso”:

 _.delay(function(msg) { console.log(msg); }, 5000, 'Hello'); 

En base a la respuesta de Joey, se me ocurrió una solución prevista (por jQuery, leer sobre ‘cola’).

De alguna manera sigue la syntax jQuery.animate () – permite ser encadenado con otras funciones fx, soporta ‘slow’ y otras jQuery.fx.speeds además de ser completamente jQuery. Y se manejará de la misma manera que las animaciones, si las detiene.

jsFiddle test ground con más usos (como mostrar .stop ()), se puede encontrar aquí .

el núcleo de la solución es:

 $('') .delay(100 /*ms*/) .queue( (next) => { $('#result').text('done.'); next(); } ); 
  
 $( "#foo" ).slideUp( 300 ).delay( 5000 ).fadeIn( 400 );