Question

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 position 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?

Answer 1

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