¿Cómo esperar 5 segundos con jQuery?

Question

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 lograrlo?

Answer 1

Construido en javascript setTimeout.

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

ACTUALIZACIÓN: quiere esperar ya que cuando la página ha terminado de cargar, a fin de poner ese código dentro del guión de $(document).ready(...);.

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

Answer 2

utilizar un temporizador Javascript a la normalidad:

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

Esto espere 5 segundos después de que el DOM está listo. Si desea esperar hasta que la página es en realidad loaded necesita utilizar esto:

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

EDIT: En respuesta al comentario de la OP preguntando si hay una manera de hacerlo en jQuery y no utilizar setTimeout la la respuesta es no. Pero si usted quiere que sea más "jQueryish" que podría concluir así:

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

A continuación, puede llamar así:

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

Answer 3

El Underscore library también proporciona una función de "retraso":

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

Answer 4

han estado utilizando este por una superposición de mensaje que se puede cerrar de inmediato al hacer clic o se hace un autoclose después de 10 segundos.

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

Answer 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 Promises/A hasta jQuery 3) generalmente se considera una forma más clara de abordar muchos problemas asincrónicos.La implementación de un método de $.wait() el uso de este enfoque es particularmente legible creo:

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

Y aquí es cómo se puede usar:

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

Sin embargo, si, después de una pausa, sólo desea realizar acciones en una sola la selección de jQuery, entonces usted debe a utilizar jQuery nativa .delay() que creo que también utiliza de diferidos bajo el capó:

$(".my-element").delay(5000).fadeIn(); 

Answer 6

setTimeout(function(){ 


},5000); 

Coloque el código dentro de la { }

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.

Answer 7

Sobre la base de la respuesta de Joey, se le ocurrió una (por jQuery, leer acerca de 'cola') solución destinada.

Sigue de alguna manera la sintaxis jQuery.animate() - permite ser encadenado con otras funciones fx, admite '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.

jsEl campo de prueba de Fiddle con más usos (como mostrar .stop()), se puede encontrar here.

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>

el todo como un plug-in, apoyando 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.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: puesto de espera se suma a la pila de animación, $ css() se ejecuta inmediatamente - ya que se supone: el comportamiento esperado de jQuery.

Answer 8

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