JQuery utilizza each() come classico per ogni ciclo e non tutto in una volta

Question

Sto provando a scorrere un insieme di tag div e li dissolvolo uno alla volta. Finora, usando l'operatore .each(), li fa tutti in una volta. Come si usa .each() come un classico per ogni ciclo?

Ecco lo snippet di codice JQuery e attualmente sbiadisce tutti i tag div dentro e fuori insieme non uno alla volta.

$("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); 
}  
}); 

Grazie per considerare la questione,

Answer 1

Non si tratta di utilizzare .each() contro una pianura for ciclo. Il problema è che le animazioni vengono gestite tramite timeout (gestiti da jQuery). Le chiamate a .fadeIn() e .fadeOut() restituiscono immediatamente, prima che le animazioni abbiano avuto luogo.

Si potrebbe aggiungere un certo ritardo ad ogni fadeIn(), oppure si potrebbe strutturare il codice in modo diverso:

$("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 ritardo:

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

La funzione .each funziona come previsto. Ciò che non funziona come previsto è il fatto che Javascript sia di natura asincrona. Non attende il completamento di showDiv prima di chiamare di nuovo hideDiv. Le chiamate iniziano quindi a entrare in conflitto tra loro.

Quello che si desidera utilizzare è invece un intervallo che non è in realtà una parte di jQuery stesso ma è incorporato in Javascript.

Qualcosa di simile a questo:

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

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