3

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

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

有谁知道我可以如何更改它以允许.post在之前的 elem/s 完成之前使用 fadeIn() 吗？

4

2 回答 2

5

each()使用并使用 a对它们进行迭代setTimeout()，将动画的持续时间乘以 each 中的电流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...)

编辑：我有一个错误。我在this里面使用setTimeout()了不同的值。编辑以传入正确的值。

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

于 2010-07-31T15:05:29.207 回答
1

类似于 patrick 的解决方案，但在我看来更简洁

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

demo ,300是延迟的持续时间 其中 as'slow'是淡入淡出的持续时间

于 2010-07-31T15:14:24.100 回答