代码之家 › 专栏 › 技术社区 › Trip

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

sequential fadein animation jquery javascript

3

Trip · 技术社区 · 15 年前

我试图制作一个连续的动画,循环遍历元素列表 .post 然后慢慢淡出。最困难的部分是让下一个迭代在最后一个迭代结束之前开始衰退。到目前为止,我所拥有的只是一个简单的顺序动画,一个接一个地淡出它们。

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

.邮政

2 回复 | 直到 15 年前

1

5

user113716 15 年前

使用 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);
});

所以每个 设置超时() 持续时间为 n*600 ,应该会给你想要的效果。

顺便说一下,如果你不需要 posts .each() 之后 .hide() $(".post").hide().each(func...)

我犯了个错误。我用的是 this 设置超时()

编辑: 看错了问题。更改的持续时间 设置超时() 到 300 使动画部分重叠。

2

1

Ties 15 年前

类似于帕特里克的解决方案,但在我看来有点干净

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

demo 300 'slow' 是褪色的持续时间