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