交错 jQuery 动画答案

【问题标题】：Stagger jQuery Animations交错 jQuery 动画
【发布时间】：2010-12-31 04:46:37
【问题描述】：

我想在 jquery 1.3 中为一系列项目设置动画，每个下一个项目从第一个动画的中途开始。换句话说，我想要一个半队列效果。我试图使用下面的代码，但它不起作用。有人有什么想法吗？

    $("h3").click(function(){
      $(".projectItem").each(function (i) {
        if (i > 0){
            setTimeout ("", 500);
        }
        $(this).animate({"opacity": 0, "duration": 1000});
      });
    });

PS：我尝试使用各种“空闲”或“暂停”jquery 插件，但我怀疑使用的技术是 jquery 1.3 之前的？

PPS：提前感谢您的帮助 :)

【问题讨论】：

标签： jquery queue jquery-animate sequence

【解决方案1】：

你可以试试这样的：

$("h3").click(function(){
  $(".projectItem").each(function (i) {
    // store the item around for use in the 'timeout' function
    var $item = $(this); 
    // execute this function sometime later:
    setTimeout(function() { 
      $item.animate({"opacity": 0}, 1000);
    }, 500*i);
    // each element should animate half a second after the last one.
  });
});

这里的总体思路是使用您的 .projectItem 列表 - 您将动画从开始延迟到每个项目 500 毫秒。第一项 (i=0) 将有 0 毫秒的延迟，并在下一个事件循环期间（几乎）立即执行。每个其他项目将在它之前的每个项目延迟 500 毫秒，并且由于您的动画持续 1000 毫秒，因此它将在最后一个项目动画的一半左右开始。

【讨论】：

你也可以使用 $item.delay(500*i).animate(...) 而不是使用 setTimeout。很好的答案！

【解决方案2】：

我认为将动画分成两部分（从不透明度 1 到 0.5，从 0.5 到 0）并使用常规队列（如果可以中断的话）会更简单。

如果我们从不透明度 1 开始，这段代码是：

$("h3").click(function(){
  $(".projectItem").each(function (i) {
    $(this).animate({"opacity": 0.5, "duration": 500}, function(){
      //... put here something in the half way ...
      $(this).animate({"opacity": 0, "duration": 500}); 
    });
  });
});

【讨论】：