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; }