[JS]複数のエレメントをフェードのアニメーションで華麗に表示するスクリプト

複数のエレメントを連続して、アニメーションで表示するjQueryを使ったスクリプトを紹介します。

Display Elements Sequentially with jQuery
デモページ

[ad#ad-2]

実装は非常にシンプルです。

HTML

デモでは、画像をリスト要素で配置しています。

<ul>
	<li><img src="image.jpg" /></li>
	<li><img src="image.jpg" /></li>
	<li><img src="image.jpg" /></li>
	<li><img src="image.jpg" /></li>
	<li><img src="image.jpg" /></li>
	<li><img src="image.jpg" /></li>
</ul>

HTML

アニメーションのトリガーとなるのは、「Show Images」のテキストリンクを使用しています。

<p style="clear: both; display: none;"><a href="#">Show Images</a></p>

CSS

スタイルシートでは、単にリストのマークを消して、フロートで並べているだけです。

li {
	float:  left;
	list-style: none;
	margin: 0 25px 25px 0;
}

[ad#ad-2]

JavaScript

スクリプトは、jquery.jsを外部ファイルとして、下記のスクリプトを記述します。
適用するオブジェクトやフェードのタイミングは簡単に変更できます。

(function() {
	$('p').show();
	var lis = $('li').hide();

	$('a').click(function() {
		var i = 0;
		(function displayImages() {
			lis.eq(i++).fadeIn(200, displayImages);
		})();
	});
})();