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

Question

我正在尝试制作一个顺序动画,循环遍历元素列表.post并慢慢淡化它们.困难的部分是让它在下一次迭代开始消失之前,最后一次迭代完成衰落.到目前为止我所拥有的只是一个简单的顺序动画师,它们一个接一个地逐渐消失.

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

有没有人知道如何.post在前一个elem/s完成之前改变它以允许fadeIn()？

Answer 1

使用它们迭代它们each()并使用a 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...)

编辑:我有一个错误.我在this里面使用setTimeout()它有不同的价值.编辑传递正确的值.

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