帶延期管道的jQuery動畫？

Question

我想在jQuery腳本中使用管道作爲我的動畫命令。我有18個動畫函數，我想依次運行，然後我需要CSS位置重置，以便我可以再次運行動畫。

NB：我已經更新此代碼鏈的命令所建議的，新的代碼是.....

$.Deferred(function(dfr) { 
dfr.pipe(function() { 
$(".block1").delay(500).fadeIn().animate({"left": "+=600px"}, 2500, "linear") .animate({left: '+=10', bottom: '+=10'}, 100, "linear").animate({"left": "+=27px"}, 100, "linear").animate({left: '+=10', bottom: '-=10'}, 100, "linear").animate({"left": "+=25px"}, 100, "linear").fadeOut().css('background', 'red'); 
$(".block2").delay(500).fadeIn().animate({"left": "+=692px"}, 2870, "linear").fadeOut(); 
$(".block3").delay(4010).fadeIn().animate({"left": "+=29px"}, 250, "linear").fadeOut(); 
$(".block4").delay(4010).fadeIn().animate({"left": "+=10px"}, 250, "linear").animate({bottom: '+=15'}, 100, "linear").fadeOut(); 
}). 
pipe(function() { 
$(".block1").css('left', '0px'); 
}). 
pipe(function() { 
$(".block1").delay(500).fadeIn(); 
}); 
}).resolve(); 

我已經使用在http://onwebdev.blogspot.com/2011/09/jquery-deferred-objects-and-sequential.html此的例子。它不會爲我工作。

有人能指出我正確的方向嗎？

Answer 1

傳遞給管道方法的函數應該爲"return another observable object"。在這種情況下，您可以簡單地傳回動畫。

例如爲：

$.Deferred(function (dfr){ 
    dfr.pipe(function(){ 
     return $(".block1").delay(500).fadeIn(); 
    }); 
}).resolve(); 

Answer 2

雖然這不能解決您的問題，請鏈接這些命令。它會更有效率，而不是每次打電話都要經過dom。

$(".block1").delay(500).fadeIn() 
    .animate({"left": "+=600px"}, 2500, "linear") 
    .animate({left: '+=10', bottom: '+=10'}, 100, "linear");