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

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

  •  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' 是褪色的持续时间

    推荐文章