Stagger 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插件，但我懷疑所使用的技術進行預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毫秒，它將在最後項目動畫的大約一半處開始。

Answer 2

我認爲這是簡單的打破動畫〜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}); 
    }); 
    }); 
});