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

Question

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

Diese Schleife blendet alle enthaltenen Bilder gleichzeitig aus und wieder ein...

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

Ich habe mir die Jquery-Funktionen angesehen delay() y setInterval() und die native JavaScript-Funktion setTimeout() .

Es scheint, dass ich sie entweder gar nicht zum Laufen bekomme oder die Beispiele, die ich gesehen habe, langwierig und kompliziert sind. Mit der Magie von Jquery scheint es, ich sollte in der Lage sein, sehr wenig Code die Schleife oben für es in Serie zu arbeiten hinzufügen.

Wie bereits erwähnt, suche ich nach einem sauberen, einfachen Beispiel.

Answer 1

Sie können verwenden .delay() in Kombination mit dem Index der .each() dem Rückruf zur Verfügung stellt, etwa so:

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

Dies würde sie hintereinander machen (schnell = 200 + langsam = 600), wenn Sie mehr Verzögerung wollen, erhöhen Sie einfach die 800 auf was immer Sie wollen. Im obigen Beispiel läuft die erste sofort, die nächste 800ms später, die nächste 800 nach, dass, 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');
    });
});

* blickt Nick an *

Es gibt noch eine andere Möglichkeit, dies zu tun. Dabei wird keine zeitliche Verzögerung wie oben verwendet, sondern ein rekursiver Ansatz, bei dem der Abschluss 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())