Jquery .each() incluant un délai à la recherche d'un code propre

Question

Pour être bref, je cherche une boucle jQuery qui sélectionnera chaque div avec une classe (environ 10 petites divs dans une ligne) puis exécutera un certain code sur chaque div spécifiquement en fondu et dans l'image contenue dans la div, puis fera une pause et passera à la div suivante.

Cette boucle permet de faire un fondu enchaîné de toutes les images contenues en même temps...

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

J'ai regardé les fonctions jquery delay() y setInterval() et la fonction native JavaScript setTimeout() .

Il semble que soit je n'arrive pas à les faire fonctionner du tout, soit les exemples que j'ai vus sont longs et compliqués. Avec la magie de Jquery, je devrais pouvoir ajouter très peu de code à la boucle ci-dessus pour qu'elle fonctionne en série.

Comme mentionné, je cherche un exemple simple et propre.

Answer 1

Vous pouvez utiliser .delay() en combinaison avec l'indice le .each() fournit au callback, comme ceci :

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

Cela permet de les faire dos à dos (rapide = 200 + lent = 600), si vous voulez plus de retard, augmentez simplement les 800 à ce que vous voulez. Dans l'exemple ci-dessus, le premier s'exécute immédiatement, le suivant 800 ms plus tard, le suivant 800 après cela, etc.

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

* Regarder Nick *

Voici une autre façon de procéder. Il ne s'agit pas d'une temporisation comme ci-dessus, mais plutôt d'une approche récursive où la fin d'une animation entraîne l'exécution de la suivante.

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