在动画回调完成之前触发 jquery 循环进行迭代？

Question

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

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

有谁知道我如何更改此设置以允许 .post 在前面的 elem/s 完成之前淡入（）？

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

---

编辑： 我有一个错误。我在 setTimeout() 中使用了 this，它具有不同的值。编辑以传递正确的值。

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

Answer 2

与帕特里克的解决方案类似，但我认为

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

演示（300） 更干净一些是延迟的持续时间，其中 'slow' 是淡入淡出的持续时间