function move() { var boxes = $('.box'); var box1 = $('#box1'); var box2 = $('#box2'); var box3 = $('#box3'); var box4 = $('#box4'); box1.animate({ 'top':'0' }, 1000); box2.delay(500).fadeOut(1000); box3.delay(1000).slideUp(500).slideDown(500).slideUp(1000); box4.delay(1500).hide(1000); $.when(boxes).done(function () { alert('done!'); }); } $('button').on('click', move);
<button>Move</button> <div id="world"> <div id="box1" class="box"></div> <div id="box2" class="box"></div> <div id="box3" class="box"></div> <div id="box4" class="box"></div> </div>
#world { position: relative; height: 150px; border: 1px solid #ccc; } .box { position: absolute; width: 50px; height: 50px; background-color: #00f; top: 100px; } #box1 { left: 0; } #box2 { left: 55px; } #box3 { left: 110px; } #box4 { left: 165px; }