JavaScript

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

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

.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の記述

※複数サムネイル画像のclassを非表示にします。必要に応じて変更して下さい。。

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

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

※5個のサムネイル画像を用意しました。リンククリックで用意した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>

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

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

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

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。