在动画回调完成之前启动jquery循环迭代？

Question

我正在尝试制作一个顺序动画，在其中一个循环遍历元素列表.post并缓慢淡入它们。困难的部分在于使下一次迭代在上一次完成淡入之前开始淡入。到目前为止，我只有一个简单的顺序动画师，可以一个接一个地淡入它们。

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

有没有人知道我该如何更改这个代码，以便在之前的元素完成之前，允许.post淡入（fadeIn()）?

- Trip

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变量用于任何其他目的，可以将其消除，并在.hide()之后链接.each()，如$(".post").hide().each(func...)

---

编辑：我犯了一个错误。我在setTimeout()内部使用了this，它具有不同的值。已编辑以传递正确的值。 编辑：误读问题。更改setTimeout()的持续时间为300，以使动画部分重叠。

- user113716

---

请原谅我的愚笨。我对jquery并不擅长。但是这会返回“太多递归”的错误。我甚至不确定从哪里开始解密。 - Trip

@Trip - 不确定为什么会出现这种情况，但请看我的更新。我的代码中有一个错误。 - user113716

@Trip - 还要确保你没有进入循环，如果代码比你的问题展示的还要多的话。而且我不确定 arguments.callee 的目的是什么。你可能需要将其删除。 - user113716

太棒了，它起作用了，我只是像往常一样愚蠢。为了让它更明显，我改变了fadeIn（1500）和index * 300。 - Trip

@Trip - 这里有一个示例，展示了它的实际效果。http://jsfiddle.net/rbyN6/ 我需要看到更多你的代码才能确定问题所在。而且我不确定你所说的“在最后一个完成之前”是什么意思。我原以为你想让它们按顺序执行。你是说你想让它们同时进行吗？还是部分重叠？ - user113716

@Trip - 好的，我明白了。你想要部分重叠。是的，改变持续时间就可以了。:o) - user113716

Answer 2

与Patrick的解决方案类似，但在我看来更加简洁

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

演示, 300 是延迟的持续时间，而'slow'是淡入淡出的持续时间。

- Ties

---

啊，是的，它确实有效，我意识到在将参数更改为更明显的缓动之后。 - Trip