在动画回调完成之前触发一个jQuery循环来迭代?
问题描述:
我想做一个顺序动画,一个循环遍历元素列表.post
's并慢慢淡化它们。困难的部分在于让下一次迭代在最后一次衰落完成之前开始消失。到目前为止,我所拥有的只是一个简单的连续动画制作器,它们可以一个接一个地淡化它们。在动画回调完成之前触发一个jQuery循环来迭代?
$(".post").hide();
var posts = $(".post"),
i = 0;
(function() {
$(posts[i++]).fadeIn('slow', arguments.callee);
})();
有谁知道我怎么可能改变以往ELEM/S已经完成了在此之前,让.post
到淡入()?
答
使用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
,以在动画中给出部分重叠。
答
帕特里克的解决方案类似,但在我看来
(function() {
$(".post").hide().each(function(index){
$(this).delay(index * 300).fadeIn('slow');
});
})();
demo干净了一点,在300
是延迟,其中作为'slow'
是淡出
原谅我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