ページを開いたときに、画像が順番にフェードインしてきたらカッコイイ。


こういうやつです。
jquerydelay


























これをjQueryでつくる方法です。

htmlは以下のようにします。


<div id="photoFade">
<ul>
<li><img src="img/index/nyan1.jpg" alt="neko"></li>
<li><img src="img/index/nyan2.jpg" alt="neko"></li> 
<li><img src="img/index/nyan3.jpg" alt="neko"></li>
<li><img src="img/index/nyan4.jpg" alt="neko"></li> 
<li><img src="img/index/nyan5.jpg" alt="neko"></li>
<li><img src="img/index/nyan6.jpg" alt="neko"></li> 
</ul> 
</div>

css側では、あらかじめ<li>を透明にしときます。

#photoFade ul li{opacity:0;}

js側は以下のようにします。

$(window).bind('load', function() {
      $("#photoFade ul li").each(function(i){
$(this).delay(i*50).fadeIn();
});
});



jQueryで、上記のように並んでいる要素1つ1つを処理したい場合、each()を使います。

jQueryのeachの使い方リファレンス


↓こんな感じですね。
$('#photoFade ul li').each(function(){
hogehoge;
})

#photoFade ul の下にあるliの要素数分、命令hogehogeを繰り返す、というものです。

今回のサンプルでいうと、<li>が6個あるので6回繰り返します。
 

順番に処理してくれるのだから、そのままアニメーションを実行したくなります。
こんなふうに。
$('#photoFade ul li').each(function(){
$(this).fadeIn();
})
僕もずこれをやっちゃいました。

そうすると、全部一斉にフェードインしてきちゃって、
「eachで1つずつ処理した意味ないだろ!」と叫ぶことになりますね。

これは、javascriptが 1つ1つの処理が終わるまで待たずに次の処理をじゃんじゃん始めちゃうからです。
 

なので、フェードインが開始する時間を少しずつずらさないといけない。


そこで登場するのがdelay()さん。

delay()のリファレンス 


delay(1000);
とすると 1000ms(つまり1秒)たってからスタートしますよ、というやつ。

組み込んでみます。

$('#photoFade ul li').each(function(){
$(this).delay(1000).fadeIn();
})

 こうすると、1秒ずつ遅れてスタートしてくれるかと思いきや、そうなりません。
1秒たってから、全部がいっせいにスタート。

これだとさっきのやつと同じで、全部の処理を一気にスタートしてしまいます。

なのでこうします。

$('#photoFade ul li').each(function(i){
$(this).delay(i*1000).fadeIn();
})
わかりづらいですが、赤の部分が変わりました。

each(function(i){});

というようにfunction()の中に引数を入れると、
繰り返している回数の数が入ります。

for文と同じです。

繰り返すごとに i が増えていきます

こうすると、
以下のように動きます。

1回目の処理 → (1×1000)= 1秒後にスタート
2回目の処理 → (2×1000)= 2秒後にスタート
3回目の処理 → (3×1000)= 3秒後にスタート
4回目の処理 → (4×1000)= 4秒後にスタート
5回目の処理 → (5×1000)= 5秒後にスタート
 
こうして、1秒ずつずらすということができました。

実際1秒だと遅すぎるので、50msくらいが気持ちいいと思います、
 

これで完成ですが、これだけだとエラーを起こしちゃいます。

それは、画像が読み込まれる前にjavascriptが処理をスタートしようとして、
「あれれ、ul li imgを集めてこれないよ」と混乱しちゃうためです。

なので、画像が読み終わってから処理を開始する必要があります。

$(window).bind('load', function() {
hogehoge;
});

サーバーにリクエストしたデータのロードが完了してからhogehoge(処理)を開始するよっていう命令です。

これでいちばん外側を囲めばOKです。


完成!

【jQuery部分完成】
$(window).bind('load', function() {
      $("#photoFade ul li").each(function(i){
$(this).delay(i*50).fadeIn();
});
});

50の部分を100にしたり500にしたりすると、出てくるスピードを変えられますよ。

また、fadeIn()の部分を他のアニメーションにしたりして、違う見せ方もできますよ。