JQuery usando cada uno() como clásico para cada ciclo y no todos a la vez

Question

Estoy intentando recorrer un conjunto de etiquetas div y fundirlas una por una. Hasta ahora, usando el operador .each(), los hace todos a la vez. ¿Cómo se usa .each() como un clásico para cada ciclo?

Aquí está mi fragmento de código JQuery y actualmente desvanece todas las etiquetas div, una por una.

$("document").ready(function() { 
// all div tags are hidden at start 

    $(".myclass").each(function (i) { 
     var $div = $(this); 
     showDiv($div); 
     hideDiv($div); 
}); 

function showDiv(theDiv) 
{ 
     $(theDiv).fadeIn(4000); 
} 

function hideDiv(theDiv) 
{ 
     $(theDiv).fadeOut(4000); 
}  
}); 

Gracias por considerar la cuestión,

Answer 1

No se trata de utilizar .each() frente a un bucle sencillo for. El problema es que las animaciones se manejan a través de tiempos de espera (administrados por jQuery). Las llamadas a .fadeIn() y .fadeOut() devuelven inmediatamente, antes de que las animaciones hayan tenido lugar.

Se podría añadir algo de retraso a cada fadeIn(), o se podría estructurar su código diferente:

$("document").ready(function() { 
    var divs = $('.myclass'), i = 0; 
    function reveal() { 
    if (i === divs.length) return; 
    divs.eq(i).fadeIn(4000, function() { 
     divs.eq(i).fadeOut(4000, function() { 
     i++; 
     setTimeout(reveal, 0); 
     }); 
    }); 
    } 
    setTimeout(reveal, 0); 
}); 

Answer 2

Uso de retardo:

var delay = 0; 
$(".myclass").each(function (i) { 
    var $div = $(this); 
    showDiv($div); 
    hideDiv($div, delay); 
    delay += 100; 
}); 


function hideDiv(theDiv, delay) 
{ 
    $(theDiv).fadeOut(4000).delay(delay); 
} 

Answer 3

Su función .each funciona como se esperaba. Lo que no funciona como se espera es el hecho de que Javascript es de naturaleza asincrónica. No espera a que se complete el showDiv antes de llamar al hideDiv nuevamente. Las llamadas comienzan a entrar en conflicto entre ellas.

En su lugar, lo que desea utilizar es un intervalo que no es realmente una parte de jQuery en sí, sino que se basa en Javascript.

Algo como esto:

function showHide(theDiv) { 
    if($(theDiv).is(":visible")) { 
      $(theDiv).fadeOut(4000); 
    } 
    else { 
      $(theDiv).fadeIn(4000); 
    } 
} 

setInterval(function() { showHide("#theDivsID") }, 4100);