¿Cómo esperar 5 segundos con jQuery?

Estoy tratando de crear un efecto donde se carga la página, y después 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 desde que la página ha terminado de cargarse, así que ponga ese código dentro de su $(document).ready(...);secuencia de comandos.

ACTUALIZACIÓN 2 : jquery 1.4.0 introdujo el .delaymétodo. Compruébelo usted mismo . Tenga en cuenta que .delay solo funciona con las colas de efectos 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 loadednecesita usar esto:

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

EDITAR: en respuesta al comentario del OP preguntando si hay una manera de hacerlo en jQuery y no usar setTimeoutla respuesta es no. Pero si quisieras hacerlo más "jQueryish" podrías envolverlo así:

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

Entonces podría 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 Deferredmodelo que (a pesar de no adherirse a las especificaciones Promesas / A hasta que jQuery 3) se considere generalmente como una forma más clara de abordar muchos problemas asincrónicos. Implementar un $.wait()método 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 una pausa, solo desea realizar acciones en una sola selección de jQuery, entonces debería usar el nativo de jQuery, .delay()que creo que también usa Deferred debajo del capó:

$(".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');

Basado en la respuesta de Joey, se me ocurrió una solución prevista (por jQuery, leer sobre 'cola').

De alguna manera, sigue la sintaxis de jQuery.animate (): permite ser encadenado con otras funciones de fx, admite 'slow' y otras velocidades jQuery.fx. además de ser completamente jQuery. Y se manejará de la misma manera que las animaciones, si las detiene.

El campo de prueba jsFiddle con más usos (como mostrar .stop ()), se puede encontrar aquí .

El núcleo de la solución es:

$('<queue/>')
.delay(100 /*ms*/)
.queue( (next) => { $('#result').text('done.'); next(); } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

todo como un complemento, que admite el uso de $ .wait () y $ (..). wait ():

// add wait as $.wait() standalone and $(elem).wait() for animation chaining
(function($) {

  $.wait = function(duration, completeCallback, target) {
    $target = $(target || '<queue />');
    return $target.delay(duration).queue(function(next){completeCallback && completeCallback.call($target); next();});
  }

  $.fn.wait = function(duration, completeCallback) {
    return $.wait.call(this, duration, completeCallback, this);
  };

})(jQuery);

//TEST
$(function() {

  // stand alone
  $.wait(1000, function() {
    $('#result')
    .append('...done');
  });

  // chained
  $('#result')
  .append('go...')
  .wait('slow', function() {
    $(this).append('after slow');
  })
  .css({color: 'green'});
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

Nota: dado que wait se agrega a la pila de animación, $ .css () se ejecuta de inmediato, como se supone: comportamiento esperado de jQuery.

$( "#foo" ).slideUp( 300 ).delay( 5000 ).fadeIn( 400 );

Tenga en cuenta que esta es una vieja pregunta, pero escribí un complemento para abordar este problema que alguien podría encontrar útil.

https://github.com/madbook/jquery.wait

te permite hacer esto:

$('#myElement').addClass('load').wait(2000).addClass('done');