[SOLUCIONADO] Animar array con tiempo entre elementos

[paketekun]

Tengo este código:

Código:

 var arr = $(".col-central div");		
		arr.each(function(index, element) {
			$(element).fadeOut(1000);
        });

Y lo que me pasa es que se van todos los divs a la vez. Lo que busco es que se vayan 1 a 1.

He probado con animate y me pasa lo mismo...

Que es lo que tengo mal??

Gracias por adelantado

[Alexis88]

Bienvenido a Foros del Web.

Eso ocurre porque el método se aplica a todos los elementos, sin embargo, no se establece un orden de ejecución, por lo que el efecto se produce en todos a la vez.

Una manera de hacer esto es mediante el uso de temporizadores:

Código Javascript:

$(document).ready(function(){
    var divs = $(".col-central div"),
        total = divs.length,
        i = 0,
        countdown = setInterval(function(){
            $(divs[i++]).fadeOut();
            if (i == total){
                clearInterval(countdown);
            }
        }, 1000);
});
 

Lo que realiza el script de arriba es lo siguiente:

1. Toma al conjunto de elementos sobre el cual se operará.
2. Calcula el total de ellos.
3. Establece una variable contadora para llevar un control de los elementos.
4. Establece un temporizador cíclico el cual ejecutará una función cada 1000 milésimas de segundo (1 segundo).
5. En la función, ocultamos al elemento actual y aumentamos el valor del contador en uno.
6. Verificamos si el valor actualizado del contador es igual al total de elementos. De ser así, cancelamos al temporizador, caso contrario, se seguirá ocultando a los siguiente elementos (los que queden).

DEMO

Cabe señalar que el temporizador se ejecuta de forma automática.

Un saludo

[paketekun]

Fantástico, es exactamente lo que necesitaba. Muchas Gracias por la ayuda.