jquery deferred animation.

by InviS

HTML

<div id='animated'></div>
<div id='second'></div>

CSS

#animated, #second{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    left: 0;
}
#second{
    background-color: blue;
    top: 20px;
}

JavaScript

var $a = $('#animated');
var $b = $('#second');

$.fn.myAnimation = function(options){
    options = $.extend({
        left: '+=300',
        duration: 'slow'
    }, options || {});
    return $(this).each(function(){
        $(this).animate({
            left: options.left
        }, options.duration);
    });
}

$a.myAnimation();
$.when($a).done(function(){
    $b.delay(1000).myAnimation();
    $.when($b).done(function(){
        alert('all done');
    });
});