2014.05.11

jQuery.eachを使って時間差でアニメーションをつける方法

posts_photo
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にしていますが、他のスタイルに変えれば色々と面白い効果が作れると思います。

アニメーションのつくりかた
アニメーションのつくりかた
ー Amazon.co.jpで買う


記事のタグ一覧:,

スポンサードリンク

関連記事

カテゴリー内のおすすめ記事