Esperar hasta que el jQueryanimation para completar dentro de bucle

Question

tengo algo así como el siguiente código

for(i=0, j=10; i<j ; i++){ 
    $('#an-element-'+i).fadeIn(); 
} 

¿Cómo hago para que cada iteración del bucle sólo se iniciará una vez que el fadeIn(); animación ha completado?

edición --- lo siento mi mala que no había incluido la 'i' en el bucle

Answer 1

for los bucles son síncronos, pero las animaciones son asincrónicas. Tendrá que usar la recursividad.

var i = 0, j = 10; 
(function fadeNext() { 
    if (i < j) { 
     $('#an-element-' + i++).fadeIn(fadeNext); 
    } 
})(); 

http://jsfiddle.net/uq9mH/

Answer 2

De acuerdo con su código, su bucle simplemente se desvanecerá en el mismo elemento 10 veces.

En cualquier caso, lo que se necesita es para poner la llamada en la devolución de llamada del método FadeIn: http://api.jquery.com/fadeIn/

Algo como esto debería funcionar (no probado)

var counter = 10; 
function fadeIn(elem) { 
    $(elem).fadeIn('slow', function(){ 
     if (counter > 0) { 
      fadeIn(elem); //up to you how you figure out which element to fade in 
     } 
    }); 
    counter--; 
} 

//var elem = $('.something'); 
fadeIn(elem); 

Answer 3

Puede ejecutar código después de una animación colocándolo en una función pasa como el parámetro de devolución de llamada:

$("#foo").fadeIn("slow",function() { 
    alert("done"); 
}); 

Pero no está muy claro lo que estás tratando de hacer. ¿Estás desvaneciendo el mismo elemento 10 veces?

Answer 4

Prueba esto:

for (i = 0, j = 10; i < j; i++) { 
    $('.try').each(function() { 
     $(this).delay(1000).fadeOut().delay(1000).fadeIn(); 
    }); 
} 

Puede cambiar la duración de tiempo dentro de la función de retardo. Here is the jsFiddle.

Answer 5

si tiene un retardo fijo para todo el artículo puede usar esta línea de código:

$(this).fadeIn().delay(2000).fadeOut(); 

en lugar de

$(this).fadeIn();