jQueryの繰り返し処理用の関数、$.eachを使って複数の要素に時間差でアニメーションをつける方法をメモしておこうと思います。
ギャラリーサイトなどで要素を表示するときに、ひとつずつ徐々にフェードインさせたい時などに使えると思います。
書き方はこんな感じ
li要素でオブジェクトを並べるとして、サイト表示時にオブジェクトをひとつずつフェードインさせていくコードを書いてみましょう。オブジェクトはcssで透明度を0にしておきます。
ul li{
opacity:0;
}
var thum=$('ul li'); //オブジェクトを取得
var interval=100; //フェードインさせる間隔
$.each(thum,function(i){
thum.eq(i).delay(i*interval).animate({'opacity':'1'},900,'swing');
});
.delay(i*interval)を挟むことで、指定した間隔でアニメーションが適用されていきます。
iがオブジェクトを数えていくので、処理が繰り返されるたびに1×100,2×100、3×100とアニメーションが適用されるタイミングをずらしていけるという事です。
.animateの部分を今回はopacityにしていますが、他のスタイルに変えれば色々と面白い効果が作れると思います。
