在动画回调完成之前触发一个jquery循环来迭代？

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's并以慢速淡化它们。困难的部分是让它在下一次迭代开始渐渐消失之前,最后一次迭代完成衰落。到目前为止,我所拥有的只是一个简单的顺序动画师,它们一个接一个地逐渐消失。

$(".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?

有没有人知道我怎么能改变它以允许.post在前一个elem / s完成之前fadeIn()?

2 个解决方案

#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.

使用each()迭代它们,并为每个使用setTimeout(),将动画的持续时间乘以每个中的当前索引。

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.

所以每个setTimeout()的持续时间都是n * 600,这可以给你想要的效果。

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

顺便说一句,如果你不需要posts变量用于任何其他目的,你可以消除它并在.hide()之后链接.each(),如$(“。post”)。hide()。每个(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.

编辑:我有一个错误。我在setTimeout()中使用了这个,它有不同的值。编辑传递正确的值。

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

编辑:误读了这个问题。将setTimeout()的持续时间更改为300以在动画中提供部分重叠。

#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

演示,300是延迟的持续时间,因为'慢'是衰落的持续时间

#1