delay()を使って複数のサムネイルを順番にフェードイン表示する方法【jQuery】 DAD UNION

jQueryのdelay()を使って複数のサムネイルを順番にフェードイン表示するちょっとした演出をやる方法をご紹介します。

Contents

.delay()を使って複数のサムネイルを順番にフェードイン表示するJavaScriptの記述
複数のサムネイルを順番にフェードイン表示するCSSの記述
複数のサムネイルを順番にフェードイン表示するHTMLの記述
複数のサムネイルを順番にフェードイン表示するデモページ

.delay()を使って複数のサムネイルを順番にフェードイン表示するJavaScriptの記述

※.each()で複数のサムネイル要素（.clBox）を.delay()で指定した時間だけ止めて順番にフェードイン.fadeIn()します。

<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>

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

※複数サムネイル画像エリア（.clBox）を非表示にします。必要に応じて変更して下さい。。

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

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

※5個のサムネイル画像（img1.jpg ～　img5.jpg）を用意しました。リンククリックで用意したJavaScritp関数chng()を実行します。

<h1>jQueryのeach、delayを使用して複数のサムネイルを順番にフェードイン表示</h1>
        
<div id="idWrap">

<a href="javascript:chng();">クリックしてスタート</a>
<br>　<br>
<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>

</div>