2013-01 001

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

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