Fire a jquery loop to iterate before animation callback is complete?

Question

I am trying to make a sequential animation, where a loop iterates through a list of elements .post's and fades them in slow. The difficult part is having it so that the next iteration begins fading in before the last one has finished fading. All I have so far is a simple sequential animator that fades them in one after the other.

$(".post").hide();
var posts = $(".post"),
    i = 0;
(function() {
  $(posts[i++]).fadeIn('slow', arguments.callee);
})();

Does anyone know how I could change this to allow .post to fadeIn() before the previous elem/s have finished?

Answer 1

Iterate over them using each() and use a setTimeout() for each one, multiplying the duration of the animation by the current index in the each.

var posts = $(".post").hide();

  // Holds reference to the index of the current iteration
  // ------------------v
posts.each(function( index ) {
    var $th = $(this);
    setTimeout(function() {
        $th.fadeIn('slow');   // Removed arguments.callee
    }, index * 300);
});

So each setTimeout() will have a duration of n*600, which should give you the effect you want.

By the way, if you don't need the posts variable for any other purpose, you can eliminate it and chain the .each() after the .hide(), as in $(".post").hide().each(func...)

---

EDIT: I had an error. I was using this inside the setTimeout() which has a different value. Edited to pass in the correct value.

EDIT: Mis-read the question. Changed the duration of setTimeout() to 300 to give a partial overlap in the animations.

Answer 2

Similar to patrick's solution, but a little cleaner in my opinion

(function() {
  $(".post").hide().each(function(index){
    $(this).delay(index * 300).fadeIn('slow');
  });
})();

demo, the 300 is the duration of the delay where as the 'slow' is the duration of the fade