Question

我正在尝试制作一个顺序动画，循环遍历元素列表.post并慢慢淡化它们。困难的部分是让它在下一次迭代开始消失之前，最后一次迭代完成衰落。到目前为止，我所拥有的只是一个简单的顺序动画师，它们一个接一个地逐渐消失。

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

有没有人知道如何更改此设置以允许.post在前一个elem / s完成之前使用fadeIn（）？

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...)，如this

编辑：我遇到了错误。我在setTimeout()内使用了setTimeout()，它具有不同的值。编辑传递正确的值。

编辑：误读了这个问题。将300的持续时间更改为{{1}}，以便在动画中提供部分重叠。

Answer 2

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

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

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

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

2 个答案: