Jquery .each() einschließlich einer Verzögerung auf der Suche nach sauberen Code

Question

Um kurz zu sein, ich bin auf der Suche nach einer jQuery-Schleife, die jedes div mit einer Klasse (ca. 10 kleine divs in einer Zeile) auswählen und dann Code auf jedem div ausführen speziell ausblenden und in dem Bild in der Div enthalten und dann pausieren und weitermachen und das gleiche tun, um die nächste div.

Diese Schleife ausblendet/in all der enthaltenen Bilder zur gleichen Zeit ...

$('.div_class').each(function() { 
    $(this).children().fadeOut('fast', function() { 
     $(this).fadeIn('slow'); 
    }); 
}); 

Ich habe an den jquery Funktionen sah delay() und setInterval() und die native Funktion JavaScript setTimeout().

Es scheint, dass ich sie entweder überhaupt nicht zur Arbeit bringen kann oder die Beispiele, die ich gesehen habe, sind lang und kompliziert. Mit der Magie von JQuery scheint es, dass ich in der Lage sein sollte, sehr wenig Code in die Schleife einzufügen, damit es in Serie funktioniert.

Wie bereits erwähnt, ich bin für ein sauberes einfaches Beispiel suchen.

Answer 1

Sie können .delay() in Kombination mit dem Index verwenden, der .each() an die Callback sieht wie folgt aus: wollte

$('.div_class').each(function(i) { 
    $(this).children().delay(800*i).fadeOut('fast', function() { 
     $(this).fadeIn('slow'); 
    }); 
}); 

Dies würde tun sie Rücken an Rücken (schnell = 200 + langsam = 600), wenn Sie mehr Verzögerung nur erhöhen, dass 800 zu was auch immer Sie wollen. Im obigen Beispiel sofort die erste läuft, später die nächsten 800 ms, der nächste 800 danach, usw.

Answer 2

$('.div_class').each(function(index) { 
    // delay inserted before effect (based off index) 
    $(this).children().delay(index * 1000).fadeOut('fast', function() { 
     $(this).fadeIn('slow'); 
    }); 
}); 

* Glares bei Nick *

Hier ist eine andere Art und Weise getan werden könnte. Dies verwendet keine zeitgesteuerte Verzögerung wie oben, sondern verwendet einen rekursiven Ansatz, bei dem die vollständige Ausführung einer Animation zur Ausführung der nächsten führt.

function animate (elms) { 
    var target = elms[0] 
    if (target) { // guard to ensure still more 
     $(target).children().fadeOut('fast', function() { 
      $(this).fadeIn('slow') 
      // o/` take one down, pass it around, 
      //  98 elements of goop in the list o/` 
      animate(elms.slice(1)) 
     } 
    } 
} 
animate($('.div_class').get())