Jquery .each() z uwzględnieniem opóźnienia szukającego czystego kodu

Question

Krótko mówiąc, szukam pętli jQuery, która wybierze każdego div z klasą (w przybliżeniu 10 małych div w linii), a następnie wykona jakiś kod na każdym div konkretnie zaniknąć i na obrazie zawartym w div, a następnie zatrzymać i przejść dalej i zrobić to samo do następnego div.

Pętla ta zanika/we wszystkich obrazów zawartych w tym samym czasie ...

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

Mam spojrzał na funkcji jquery delay() i setInterval() i natywnej funkcji JavaScript setTimeout().

Wygląda na to, że albo nie mogę ich w ogóle uruchomić, albo przykłady, które widziałem, są długie i skomplikowane. Z magią jquery wydaje mi się, że powinienem móc dodać bardzo mało kodu do powyższej pętli, żeby działała w seriach.

Jak wspomniano, szukam czystego prostego przykładu.

Answer 1

Można użyć .delay() w połączeniu z indeksować .each() dostarcza do wywołania zwrotnego, na przykład:

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

to zrobi je z powrotem do tyłu (fast = 200 + slow = 600), jeśli chcesz więcej opóźnienia tylko zwiększ to 800 do czego tylko chcesz. W powyższym przykładzie pierwszy uruchamia natychmiast, kolejne 800ms później, kolejna 800 po tym, itp

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'); 
    }); 
}); 

* patrzy na Pseudonim *

Oto kolejny sposób można to zrobić. Nie korzysta z opóźnienia w czasie, jak wyżej, ale wykorzystuje podejście rekursywne, w którym pełna animacja spowoduje wykonanie następnej.

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())