Jquery .each (), включая задержку при поиске чистого кода - PullRequest
Новая
       1

Jquery .each (), включая задержку при поиске чистого кода

9 голосов
/ 10 ноября 2010

Короче говоря, я ищу цикл jQuery, который будет выбирать каждый div с классом (около 10 маленьких div в строке), а затем выполнять некоторый код для каждого div, специально исчезать и в изображении, содержащемся в div, и затем сделайте паузу и двигайтесь дальше и сделайте то же самое для следующего деления.

Этот цикл исчезает / во всех содержащихся изображениях одновременно ... 

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

Я рассмотрел функции jquery delay() и setInterval() и встроенную функцию JavaScript setTimeout().

Кажется, я либо не могу заставить их работать вообще, либо примеры, которые я видел, длинны и сложны. С магией jquery, похоже, я смог бы добавить очень мало кода в цикл выше, чтобы он работал последовательно.

Как уже упоминалось, я ищу чистый простой пример.

Ответы [ 2 ]

35 голосов
/ 10 ноября 2010

Вы можете использовать .delay() в сочетании с индексом, который .each() предоставляет обратному вызову, например: 

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

Это будет делать их вплотную (быстро = 200 + медленно = 600), если вы хотите больше задержки, просто увеличьте эти 800 до того, что вы хотите. В приведенном выше примере первый выполняется немедленно, следующие 800 мс спустя, следующие 800 мс после этого и т. Д.

3 голосов
/ 10 ноября 2010 
$('.div_class').each(function(index) {
    // delay inserted before effect (based off index)
    $(this).children().delay(index * 1000).fadeOut('fast', function() {
        $(this).fadeIn('slow');
    });
});

* Блики на Ника *

Вот еще один способ сделать это. При этом не используется задержка по времени, как описано выше, но используется рекурсивный подход, при котором завершение одной анимации приведет к выполнению следующей. 

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