Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery .each() including a delay looking for clean code

Tags:

To be short, I am looking for a jQuery loop that will select each div with a class (approx 10 small divs in a line) then execute some code on each div specifically fade out and in the image contained in the div and then pause and move on and do the same to the next div.

This loop fades out/in all of the contained images at the same time...

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

I have looked at the jquery functions delay() and setInterval() and the native JavaScript function setTimeout().

It seems I either cant get them to work at all or the examples I have seen are lengthy and complicated. With the magic of jquery it seems I should be able to add very little code the the loop above for it to work in series.

As mentioned, I'm looking for a clean simple example.