順番に画像をフェードイン表示する

公開日:2014年04月01日

JavaScript

ジュエリーショップのサイトを作った時のプログラム。商品写真が順番に表示されるので、目に止まりやすい気がする。

HTML

<div id="fadeInBox">
  <img src="img/html.png" alt="画像">
  <img src="img/css.png" alt="画像">
  <img src="img/jq.png" alt="画像">
  <img src="img/js.png" alt="画像">
</div>

jQueryを使っているのでjQuery読み込み用の記述
※IEのIE8以下はjQuery1系読み込み、IE9以上とIE以外のブラウザはjQuery2系読み込み

<!--[if lt IE 9]>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
  <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<!--<![endif]-->

CSS

#fadeInBox {
    height: 300px;/* 画像表示領域の高さ確保 */
}

高さを確保していないとこのページみたいに画像が表示されると下の要素が押し下げられてしまうので、高さを確保した上で表示したいなら上のCSSを記述。

#fadeInBox img {
    padding: 5px;/* 画像間の隙間 */
    display: none;/* 最初は非表示に */
}

最初から非表示だとJS無効時どうすんのよ？画像表示されないの？って時は、上記CSSを外部ファイル化して<head>内に以下の記述を入れるのがいいかも。これならJS有効時のみ非表示用CSSファイルが読み込まれるはず。

<script type="text/javascript">
<!--
	document.writeln('<link href="外部CSSファイルパス" rel="stylesheet" type="text/css">');
// -->
</script>

JavaScript

$(function(){
  setTimeout(imgFadeIn, 2000);//2000ミリ秒の部分はフェードイン開始のタイミング
});

//フェードイン関数：1000ミリ秒のところでフェード時間調整
function imgFadeIn() {
  //対象box内画像の最初の非表示要素から順番にフェードイン
  //処理完了後、自分自信を呼び出す再帰的処理で繰り返し
  $("#fadeInBox img:hidden").first().fadeIn('1000', function () {
    imgFadeIn();
  });
}

コンテンツ一覧

同じカテゴリーのコンテンツ