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

我想做一个顺序动画，一个循环遍历元素列表.post's并慢慢淡化它们。困难的部分在于让下一次迭代在最后一次衰落完成之前开始消失。到目前为止，我所拥有的只是一个简单的连续动画制作器，它们可以一个接一个地淡化它们。在动画回调完成之前触发一个jQuery循环来迭代？

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

有谁知道我怎么可能改变以往ELEM/S已经完成了在此之前，让.post到淡入（）？

来源

2010-07-31 Trip

使用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，以在动画中给出部分重叠。

来源

2010-07-31 15:05:29 user113716

原谅我daftness的持续时间的持续时间。我没有例外与jQuery。但是这会返回'太多的递归'。我不确定哪里可以开始解密如何 – Trip 2010-07-31 15:15:52

@Trip - 不知道为什么你会这样做，但看到我的更新。我在代码中有错误。 – user113716 2010-07-31 15:18:03

@Trip - 另外，如果有更多的代码比你的问题中显示的更多，请确保你不在循环中。我不确定'arguments.callee'的目的是什么。你可能想要删除它。 – user113716 2010-07-31 15:22:59

帕特里克的解决方案类似，但在我看来

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

demo干净了一点，在300是延迟，其中作为'slow'是淡出

来源

2010-07-31 15:14:24 Ties

啊，但那与我已有的那个没有什么不同。 – Trip 2010-07-31 15:17:16

呵呵？你什么意思？ – Ties 2010-07-31 15:21:49

啊，是的，它确实工作，我意识到，改变参数后，使其更明显的补间。 – Trip 2010-07-31 15:30:14

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

回答

相关问题