[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する

まずは下記ならびにフォトグラファー木村隆宏さんのサイトを御覧ください。
こちらのサイトでは、アクセス時にポートフォリオを順番にフェードさせることで非常に印象的となっています。
今回はこちらで使用しているJavaScriptをのぞきながら、どう実現しているのかを見ていきたいと思います。

使用方法

フォトグラファー木村隆宏ではJavaScriptライブラリjQueryを利用し、fade.jsでフェードを制御しています。
該当部分を抜粋し、汎用的に書き換えたのが以下となります。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>	
<script type="text/javascript">
$(function(){
	$('.fade li').hide();
});

var i = 0;
var int=0;

$(window).bind("load", function() {
	var int=setInterval("doFade(i)",100);
});

function doFade() {
	var list = $('.fade li').length;
	if (i >= list) {
		clearInterval(int);
	}
	$('.fade li').eq(i).fadeIn(1000);
		i++;
}
</script>

また、画像部分の記述もわかりやすく書くと下記のようになります。

<ul class="fade">
	<li>要素1</li>
	<li>要素2</li>
	<!-- 以下要素分 -->
</ul>

さて、js部分を順に説明をしていきます。

$(function(){
	$('.fade li').hide(); //.fade liの要素をすべてhideする
});

上記により、要素がいったん非表示の状態となります。

var i = 0;
var int=0;

$(window).bind("load", function() { //ページが読み込まれたとき
	var int=setInterval("doFade(i)",100);  //関数doFadeを100ミリ秒ごとに実行
});

後述するdoFadeという関数を一定間隔ごとに実行させるように、setIntervalを利用しています。
参考：setInterval/JavaScriptリファレンス


function doFade() { //関数doFadeです
	var list = $('.fade li').length; //要素の数を確認
	if (i >= list) { //要素の数に達したとき
		clearInterval(int); //setIntervalを解除します
	}
	$('.fade li').eq(i).fadeIn(1000); //要素を1000ミリ秒ごとにフェードインさせる
		i++;
}

このように記述することにより、印象的な見せ方をさせられます。
Javascriptサンプルページ一覧

skuare.net