2010-12-14 14 views
13

saludos toda quiero hacer jQuery sueño/esperar un segundo entre dos funcionesDormir en JQuery?

$('#div1').hide(); 
//sleep or wait or for a sec 
$("#div2").show(); 

de cómo hacerlo?

+0

¿qué pasa con [.delay()] (http://api.jquery.com/delay/)? – Kimtho6

Respuesta

34

Para su función específica .show() no está en la cola, pero hay un truco fácil para que sea puesto en cola para que pueda utilizar .delay(), así:

$('#div1').hide(); 
$("#div2").delay(1000).show(0); 

Por lo que le da un argumento 0 duración, es ahora una animación instantánea, pero en cola. Por debajo de esta setTimeout() utiliza, por lo que es básicamente el mismo comportamiento que:

$('#div1').hide(); 
setTimeout(function() { $("#div2").show(); }, 1000); 
+1

Gran respuesta, +1. –

+0

¿qué pasa si se muestra div2 y se espera un segundo, luego se muestra otro div3 o se muestra otro código de JQuery? ¿Es el comportamiento diferente en este caso? –

+0

@ sword101 - Depende de lo que busques aquí, ¿estás tratando de hacer algo genérico o recorrer un conjunto de elementos? Si se repite un simple '.cada() 'y tomar el índice y multiplicarlo por' 1000' durante un período de tiempo funciona bien, por ejemplo. –

6

Here you go!

$('#div1').hide(); 
//sleep or wait or for a sec 
setTimeout('moomoo()', 1000); 

function moomoo() { 
    $("#div2").show(); 
} 
+0

+1: buena explicación –

+0

su segundo 'setTimeout' no funcionará. Necesita una referencia de función, por lo que debe omitir el paréntesis después de 'moomoo'. – jAndy

+1

Puede tener una función anónima allí, guardará la necesidad en la función "proxy". :) –

-1

Sin sueño real, pero esto va a lograr el mismo objetivo:

$('#div1').hide(); 
//sleep or wait or for a sec 
window.setTimeout(function() { $("#div2").show(); }, 1000); 

Editar: bueno, ahora corrijo sobre el sueño "real", sin embargo el uso de la setTimeout sigue siendo válida "pura JS "solución: tu elección. :)

3

Lo siguiente debe hacer lo que quiera:

$("#div1").hide(); 
$("#div2").delay(1000).show(0); 
+0

Esto no funcionará, ya que '.show()' no es una función en cola. –

+0

Tienes toda la razón, olvidé agregar la duración. ¡Gracias por la corrección! –

1

no se puede simplemente hacer una pausa en la ejecución del código entre las llamadas. Eso significaría que el navegador no mostraría el cambio causado por la llamada hide, ya que no se realizan actualizaciones mientras se ejecuta el código. El código simplemente parece no hacer nada.

utilizar el método de setTimeout para programar el código para ser ejecutado en un momento posterior:

$('#div1').hide(); 
window.setTimeout(function(){ 
    $("#div2").show(); 
}, 1000); 

Esto establecerá el elemento como oculto y programar el código para mostrarlo a empezar más tarde. El código continuará después de la llamada setTimeout para que la función pueda salir y el navegador recupere el control para que pueda ocultar el elemento.

Cuestiones relacionadas