delay：複数のサムネイルを順番にフェードイン表示するjQuery

複数のサムネイルを表示する際のちょっとした演出を出す際に使用しました。

1．JavaScriptの記述

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function chng() {
	$('.clBox').each(function (i) {
		//delayで各サムネイルのフェードイン表示を遅らせます
		$(this).delay(i * 300).fadeIn(1000);
	});
}
</script>

2．CSSの記述
（複数サムネイル画像のclassを非表示にします）

<style type="text/css">
<!--
.clBox{
	display:none;
}
-->
</style>

3．HTMLの記述

<a href="javascript:chng();">クリックしてスタート</a>

　


<div class="clBox"><img src="img1.jpg" width="50" height="50" alt=""></div>




<div class="clBox"><img src="img2.jpg" width="50" height="50" alt=""></div>




<div class="clBox"><img src="img3.jpg" width="50" height="50" alt=""></div>




<div class="clBox"><img src="img4.jpg" width="50" height="50" alt=""></div>




<div class="clBox"><img src="img5.jpg" width="50" height="50" alt=""></div>

複数のサムネイルを順番にフェードイン表示するデモ

パッ、パッっと画像が切替って表示させるだけではちょっと味気が無いと言われたので、コレににしてみました。