Jquery .each() incluyendo un retraso buscando el código de limpieza

Question

Para ser breve, estoy buscando un bucle de jQuery que seleccionará cada div con una clase (aproximadamente 10 pequeños divs en una línea) y luego ejecutaré algún código en cada div específicamente se desvanecen y en la imagen contenida en el div y luego hacen una pausa y continúan y hacen lo mismo con el siguiente div.

Este bucle se desvanece/en todas las imágenes contenidas en el mismo tiempo ...

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

He mirado las funciones de jQuery delay() y setInterval() y la función de JavaScript nativo setTimeout().

Parece que no puedo conseguir que funcionen o los ejemplos que he visto son largos y complicados. Con la magia de jquery parece que debería ser capaz de agregar muy poco código al ciclo anterior para que funcione en serie.

Como he mencionado, estoy buscando un ejemplo simple y limpio.

Answer 1

Puede utilizar .delay() en combinación con el índice de la .each() proporciona a la devolución de llamada, así:

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

Esto les haría espalda con espalda (rápido = 200 + lenta = 600), si se desea más demoras solo aumenta ese 800 a lo que quieras. En el ejemplo anterior, la primera se ejecuta inmediatamente, los próximos 800 ms tarde, el próximo 800 después de eso, 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'); 
    }); 
}); 

* mira a Nick *

Aquí es otra forma en que se podría hacer. Esto no utiliza un retraso temporizado como el anterior, sino que utiliza un enfoque recursivo donde la totalidad de una animación dará como resultado la ejecución de la siguiente.

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