交错jQuery动画

Question

我想在jquery 1.3中为一系列项目制作动画,每个下一个项目从第一个动画开始.换句话说,我想要一个半队列效应.我试图使用下面的代码,但它无法正常工作.有没有人有任何想法？

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

PS:我试图使用各种"空闲"或"暂停"jquery插件,但我怀疑使用的技术是pre jquery 1.3？

PPS:先谢谢你的帮助:)

Answer 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)将具有0ms延迟并在下一个事件循环期间立即执行(几乎).每个项目之前的每个项目将延迟500毫秒,并且由于您的动画持续1000毫秒,它将在最后一个项目动画的大约一半处开始.