すごくお手軽に、要素を順番にフェードインで表示するスクリプト

写真をきれいに順番にフェードインさせて表示させたかったので、色々スクリプトを探していたら、すごくお手軽に実装できそうなスクリプトを見つけたので、ご紹介します。(jQueryは読み込んでおく必要があります)

お手軽に実装できるって、良いですよね!
読み込むファイルも少なくて済みますし。

【サンプル】


 

【HTML】

<ul class="sample">
<li><img src="sample.jpg"></li>
<li><img src="sample.jpg"></li>
<li><img src="sample.jpg"></li>
<li><img src="sample.jpg"></li>
<li><img src="sample.jpg"></li>
<li><img src="sample.jpg"></li>
</ul>

【JavaScript】

[JS]
$(function(){
// リストを非表示
$(‘ul.sample li’).hide();
// 繰り返し処理
$(‘ul.sample li’).each(function(i) {
// 遅延させてフェードイン
$(this).delay(500 * i).fadeIn(1000);
});
});
[/JS]

 

「ul.sample li」の箇所に、フェードイン表示させたい要素を指定するだけ。
今回の場合だと、ul.sample(親)内のli(子)を指定しています。

liタグでなくても使用できます。
親をdivにして、子をdlにしたりとか。

お手軽なコードゆえに、使いどころも考える必要はあります。

現状のコードは、ページを開くと同時に実行されるので、ファーストビューに配置されていないと、スクロールする頃には全部表示されてしまっています。
(スクロールすると次々フェードインしてくるアレとはちょっと別物なので)

今回のスクリプトは、フォトギャラリー的なページでの使用だったので問題ないのですが。
むしろそうだったので、あえて簡易的なスクリプトを探しました。

あまり複雑なスクリプトは使いたくない、JavaScriptとかあんまりわかんないな、といった時におすすめです。

参照させていただいたサイト
http://www.dataplan.jp/blog/jquery/203