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.delay(ans.delay || 0).animate( ans.css, ans.opts ) );
        } );
    
        $.when.apply(null, anims).done(function() {
            def.resolve();
        });
    
        return def.promise();
    }
};

var anims = {
    setup: [
        { elem: $('#left').find('li').eq(0), css: { left: '-200px' }, opts: { duration: 0 } },
        { elem: $('#right').find('li').eq(0), css: { right: '-200px' }, opts: { duration: 0 } }
    ],    
    animations: [
        [
            { elem: $('#left').find('li').eq(0), css: { left: '0' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 0 },
            { elem: $('#left').find('li').eq(1), css: { left: '0' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 100 },
            { elem: $('#left').find('li').eq(2), css: { left: '0' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 200 },
            { elem: $('#left').find('li').eq(3), css: { left: '0' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 300 },
            { elem: $('#right').find('li').eq(0), css: { right: '0' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 0 },
            { elem: $('#right').find('li').eq(1), css: { right: '0' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 100 },
            { elem: $('#right').find('li').eq(2), css: { right: '0' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 200 },
            { elem: $('#right').find('li').eq(3), css: { right: '0' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 300 },
        ],
        [
            { elem: $('#left').find('li').eq(0), css: { left: '-200px' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 1000 },
            { elem: $('#left').find('li').eq(1), css: { left: '-200px' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 1100 },
            { elem: $('#left').find('li').eq(2), css: { left: '-200px' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 1200 },
            { elem: $('#left').find('li').eq(3), css: { left: '-200px' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 1300 },
            { elem: $('#right').find('li').eq(0), css: { right: '-200px' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 1000 },
            { elem: $('#right').find('li').eq(1), css: { right: '-200px' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 1100 },
            { elem: $('#right').find('li').eq(2), css: { right: '-200px' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 1200 },
            { elem: $('#right').find('li').eq(3), css: { right: '-200px' }, opts: { duration: 250, easing: "easeOutQuad" }, delay: 1300 }
        ],
    ]
};

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

<ul class="blocks" id="left">
    <li>red</li>
    <li>green</li>
    <li>blue</li>
    <li>pink</li>
</ul>
<ul class="blocks" id="right">
    <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;
    overflow: hidden;
}

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

.blocks li {
    top: 40px;
    left: -200px;
    width: 200px;
    height: 50px;
    position: absolute;
}

#right li {
    left: auto;
      right: -200px;  
}

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

.blocks li:nth-child(4n+2) {
    top: 100px;
    background: green;  
}

.blocks li:nth-child(4n+3) {
    top: 160px;
    background: blue;  
}

.blocks li:nth-child(4n+4) {
    top: 220px;
    background: pink;  
}