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
:
Ver original$(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:
- Toma al conjunto de elementos sobre el cual se operará.
- Calcula el total de ellos.
- Establece una variable contadora para llevar un control de los elementos.
- Establece un temporizador cíclico el cual ejecutará una función cada 1000 milésimas de segundo (1 segundo).
- En la función, ocultamos al elemento actual y aumentamos el valor del contador en uno.
- 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