jsFiddle

• Run again
• Edit this fiddle

• Result
• JavaScript
• HTML
• CSS

var output = function(o) {
    $('#output').append(o+'<br />');
};

$('#output').empty();
output("start");

var AnimationQueue = {
    setup: function( anims ) {
        var prom = this.run( anims.setup ),
            that = this;
        
        $.each(anims.animations, function(idx, val) {
            prom = prom.pipe( function() { return that.run.call( null, val ); } );
        });
        
        return prom;
    },
    
    run: function( animations ) {
        var def = $.Deferred(),
            anims = [];
        
        $.each(animations, function(idx, ans) {
            anims.push( ans.elem.animate( ans.css, ans.opts ) );
        } );
    
        $.when.apply(null, anims).done(function() {
            def.resolve();
        });
    
        return def.promise();
    }
};

var anims = {
    setup: [
        { elem: $('#blocks').find('li').eq(0), css: { top: '0', left: '0' }, opts: { duration: 0 } },
        { elem: $('#blocks').find('li').eq(1), css: { top: '0', left: '60px' }, opts: { duration: 0 } },
        { elem: $('#blocks').find('li').eq(2), css: { top: '0', left: '120px' }, opts: { duration: 0 } },
        { elem: $('#blocks').find('li').eq(3), css: { top: '0', left: '180px' }, opts: { duration: 0 } }
    ],    
    animations: [
        [
            { elem: $('#blocks').find('li').eq(0), css: { top: '250px', left: '180px' }, opts: { duration: 500, easing: "easeOutBounce" } },
            { elem: $('#blocks').find('li').eq(1), css: { top: '250px', left: '120px' }, opts: { duration: 750, easing: "easeOutBounce" } },
            { elem: $('#blocks').find('li').eq(2), css: { top: '250px', left: '60px' }, opts: { duration: 1000, easing: "easeOutBounce" } },
            { elem: $('#blocks').find('li').eq(3), css: { top: '250px', left: '0' }, opts: { duration: 1250, easing: "easeOutBounce" } },
            { elem: $('#output'), css: { width: '100px', opacity: 0.5 }, opts: { duration: 500, easing: "easeInOutQuart" } }
        ],
        [
            { elem: $('#blocks').find('li').eq(0), css: { top: '0', left: '0' }, opts: { duration: 500, easing: "easeInOutQuart" } },
            { elem: $('#blocks').find('li').eq(1), css: { top: '0', left: '60px' }, opts: { duration: 750, easing: "easeInOutQuart" } },
            { elem: $('#blocks').find('li').eq(2), css: { top: '0', left: '120px' }, opts: { duration: 1000, easing: "easeInOutQuart" } },
            { elem: $('#blocks').find('li').eq(3), css: { top: '0', left: '180px' }, opts: { duration: 1250, easing: "easeInOutQuart" } }
        ],
        [
            { elem: $('#blocks').find('li').eq(0), css: { top: '50px', left: '0' }, opts: { duration: 500, easing: "easeInOutQuart" } },
            { elem: $('#blocks').find('li').eq(1), css: { top: '150px', left: '0' }, opts: { duration: 750, easing: "easeInOutQuart" } },
            { elem: $('#blocks').find('li').eq(2), css: { top: '50px', left: '90px' }, opts: { duration: 1000, easing: "easeInOutQuart" } },
            { elem: $('#blocks').find('li').eq(3), css: { top: '150px', left: '180px' }, opts: { duration: 1250, easing: "easeInOutQuart" } }
        ],
        [
            { elem: $('#blocks').find('li').eq(0), css: { top: '0', left: '0' }, opts: { duration: 500, easing: "easeOutBounce" } },
            { elem: $('#blocks').find('li').eq(1), css: { top: '0', left: '60px' }, opts: { duration: 750, easing: "easeOutBounce" } },
            { elem: $('#blocks').find('li').eq(2), css: { top: '0', left: '120px' }, opts: { duration: 1000, easing: "easeOutBounce" } },
            { elem: $('#blocks').find('li').eq(3), css: { top: '0', left: '180px' }, opts: { duration: 1250, easing: "easeOutBounce" } },
            { elem: $('#output'), css: { width: '600px', opacity: 1 }, opts: { duration: 500, easing: "easeInOutQuart" } }
        ]
    ]
};

$.when( AnimationQueue.setup(anims) )
    .done(function() {
        output('done');
    });

<ul id="blocks">
    <li>red</li>
    <li>green</li>
    <li>blue</li>
    <li>pink</li>
</ul>
<p id="output"></p>

#blocks {
    width: 600px;
     height: 300px;
      position: absolute;
    border: 1px solid black;
}

#output {
    width: 600px;
    height: 50px;
    position: absolute;
    border: 1px solid black;
    overflow: auto;
    background: #ccc;
    top: 305px;
}

#blocks li {
    top: 10px;
    width: 50px;
    height: 50px;
    position: absolute;
}

#blocks li:nth-child(4n+1) {
    left: 0;
    background: red;  
}

#blocks li:nth-child(4n+2) {
    left: 60px;
    background: green;  
}

#blocks li:nth-child(4n+3) {
    left: 120px;
    background: blue;  
}

#blocks li:nth-child(4n+4) {
    left: 180px;
    background: pink;  
}