Skip jquery loop to repeat until animation callback completes?

Question

I am trying to make a sequential animation in which the loop repeats through a list of elements .postand gradually slows them down. The hard part is that the next iteration starts to fade before the last iteration completes the fade. All I still imagine is a simple sequential animator that fades out one by one.

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

Does anyone know how I can change this to allow .postfadeIn () before the previous elements ended?

Answer 1

each() setTimeout() , index .

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);
});

, setTimeout() n*600, .

, posts , .each() .hide(), $(".post").hide().each(func...)

---

EDIT: . this setTimeout(), . .

: . setTimeout() 300, .

Answer 2

patrick, ,

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

demo, 300 - , 'slow' fade