jQuery animation with deferred pipes?

I am trying to use pipes for my animate commands in a jQuery script. I have 18 animate functions that I want to run sequentially, then I need the CSS posit开发者_如何学运维ion to reset so I can run the animation again.

NB : I have updated this code to chain the commands as suggested, new code is.....

$.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();

I have used the example at http://onwebdev.blogspot.com/2011/09/jquery-deferred-objects-and-sequential.html for this. It wont work for me.

Can someone point me in the right direction?

Functions passed to the pipe method should "return another observable object". In this case you can simply pass back the animation.

e.g.:

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

While this won't solve your issue, chain those commands. It'll be more efficient, rather than having to run through the dom with each call.

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