Jquery .each () incluant un délai de recherche de code propre

Pour être bref, je suis à la recherche d'un jQuery boucle qui va sélectionner chaque div avec une classe (environ 10 petites divisions en une ligne), puis d'exécuter du code à chaque div spécifiquement fondu et dans l'image contenue dans le div, puis une pause et de se déplacer et de faire la même chose pour la prochaine div.

Cette boucle s'efface/dans toutes les images contenues dans le même temps...

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

J'ai regardé les fonctions jquery delay() et setInterval() et le JavaScript natif de la fonction setTimeout().

Il semble que je soit ne peux pas obtenir à travailler ou à tous les exemples que j'ai vu sont longues et compliquées. Avec la magie de jquery, il semble que je devrais être en mesure d'ajouter un peu de code la la boucle ci-dessus pour qu'il fonctionne en série.

Comme mentionné, je suis à la recherche pour un nettoyage simple exemple.

source d'informationauteur megaSteve4 | 2010-11-10

  1. 35

    Vous pouvez utiliser .delay() en combinaison avec l'index de la .chacun() fournit à la fonction de rappel, comme ceci:

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

    Ce serait faire dos à dos (rapide = 200 + lent = 600), si vous vouliez plus de retard il suffit d'augmenter de 800 à tout ce que vous voulez. Dans l'exemple ci-dessus, la première s'exécute immédiatement, la prochaine 800ms plus tard, la prochaine 800 après cela, etc.

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

    * Éclats à Nick *

    Voici une autre manière, il pourrait être fait. Ce n'est pas utiliser une temporisation comme ci-dessus, mais plutôt une approche récursive où l'ensemble d'une animation entraînera l'exécution de la prochaine.

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