jQuery > Animation > setTimeOut .2

by s_hiroshi

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="foo1" class="box">B0</div>
<div id="foo2" class="box">B1</div>
<div id="foo3" class="box">B2</div>
<div id="foo4" class="box">B3</div>
<div id="foo5" class="box">B4</div>
<div id="foo6" class="box">B5</div>

CSS

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

JavaScript

// jquery.easing.1.3.js 
// 上記プラグインを使うとイージングのエフェクトを追加できるが未解決
var elem = $('div.box');
setTimeout(function() {
    elem.each(function(i) {
        var d = 200 + i * 30;
        $(this).animate({
            top: d,
            left: d
        }, 1500, 'swing');
    });
}, 1000);