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

Question

Pour être bref, je cherche une boucle jQuery qui va sélectionner chaque div avec une classe (environ 10 petites divs dans une ligne) puis exécuter du code sur chaque div spécifiquement fondu et dans l'image contenue dans la div puis pause et passer à autre chose et faire la même chose à 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'); 
    }); 
}); 

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

Il semble que je ne peux pas les amener à travailler du tout ou les exemples que j'ai vus sont longs et compliqués. Avec la magie de jquery il me semble que 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 du .each() fournit à la fonction de rappel, comme ceci:

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

Cela leur faire dos à dos (rapide = 200 + lent = 600), si vous voulez plus de retard suffit d'augmenter ce 800 à tout ce que vous voulez. Dans l'exemple ci-dessus le premier exécute immédiatement, les prochains 800ms plus tard, le prochain 800 après, 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'); 
    }); 
}); 

* dévisage Nick *

est une autre façon Ici, il pourrait être fait. Ceci n'utilise pas un délai temporisé comme ci-dessus, mais utilise plutôt une approche récursive où l'intégralité d'une animation se traduira par 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())