function move() { $('.target') .animate({ left:'100px', top:'100px' }, 500, 'swing') .queue(function () { $(this).css('background-color', 'red').dequeue(); }) .animate({ top:'0' }, 500, 'swing') .queue(function () { $(this).css('background-color', 'green').dequeue(); }) .animate({ left:'0' }, 500, 'swing') .queue(function () { $(this).css('background-color', 'glue').dequeue(); }); } $('button').on('click', move);
<button>Move</button> <div id="world"> <div class="target"></div> </div>
#world { position: relative; height: 150px; border: 1px solid #ccc; } .target { position: absolute; width: 50px; height: 50px; background-color: blue; }