2013-01 002

by Takayuki Shimada

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() {
    var tgt = $('.target');
    tgt.animate({
        left: '100px',
        top: '100px'
    }, 500, 'swing', function() {
        $(this).css('background-color', 'red').animate({
            top: '0'
        }, 500, 'swing', function() {
            $(this).css('background-color', 'green').animate({
                'left': '0'
            }, 500, 'swing', function() {
                $(this).css('background-color', 'blue');
            });
        });
    });
}

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