Chain Animation function using deffer / promise in jquery.

This simple function will let you execute your chain of animations in sequence very easily.


//define chain function
$.chain = function() {
    var promise = $.Deferred().resolve().promise();
// pipe all arguments
    jQuery.each( arguments, function() {
        promise = promise.pipe( this );
    return promise;

// Pass the animations as arguments to chain function in a sequence
var animations = $.chain(function() {
    return $('.div1').fadeOut('slow');
}, function() {
    return $('.div2').fadeIn('fast');
}, function() {
    return $('.div3').animate({ left: 500 }, 1500 );

// done callback for the promise returned by animations var
$.when( animations ).done(function() {
    // animations completed




Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.