jQuery > Animation > Click .1

by s_hiroshi

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="foo" class="box">B1</div>
<div id="bar" class="box">B2</div>

CSS

div#foo {
    /*
     *
     * jQuery.animateで絶対位置を操作するときは
     * position absoluteは必須
     *
     */
    position: absolute;
    width: 25px;
    height: 25px;
    background: #eee;
}
div#bar {
    position: absolute;
    top: 30px;
    width: 25px;
    height: 25px;
    background: #ddd;
}

JavaScript

$("#foo").click(function() {
    $(this).animate({
        left: '350px'
    }, 1500, 'swing');
});
$("#bar").click(function() {
    $(this).animate({
        left: '350px'
    }, 500, 'swing');
});

// jquery.easing.1.3.js 
// 上記プラグインを使うとイージングのエフェクトを追加できるが未解決