2013-01 003

HTML

<button>Move</button>
<div id="world">
    <div class="target"></div>
</div>

SCSS

#world {
  position: relative;
  height: 150px;
  border: 1px solid #ccc;
}
.target {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
}

JavaScript

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').css('width','1000px').dequeue();
        })
        .animate({
            left:'0'
        }, 500, 'swing')
        .queue(function () {
            $(this).css('background-color', 'glue').dequeue();
        });
}

$('button').on('click', move);