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

公開日: : 最終更新日:2014/10/09 JavaScript

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

サンプルデータ

icon_html icon_css icon_jq icon_js icon_php icon_mysql icon_wp icon_css1

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();
  });
}

関連記事

icon_scroll

スクロール位置を取得

スクロール位置を取得して80%以上スクロールしたら背景色を変えるプログラム。 サンプルデータ $(function() { $(window).scroll(function() { ...

記事を読む

js

GoogleMap左上の白い枠を消す

左上の白い枠を消してほしいという要望が多いので。よく使うマップコードをスクラップ。 <!doctype html> <html> <head>...

記事を読む

icon_kaiten

要素を回転させる

jQueryのanimateメソッドを使って要素を回転させてみるプログラム。 サンプルデータ $('#box1').animate( {'z-index': 1},//z-inde...

記事を読む

js

スムーススクロールを作る – 応用

指定位置にするするとスクロールするプログラムを作ります。 必要な値は? ページ内スクロールをした際のゴール地点「y座標」の値 画面に必要なパーツは? 高さのあるコン...

記事を読む

js

スムーススクロールを作る – 基礎

ページトップへするするとスクロールするプログラムを作ります。 必要な値は? ページ内スクロールをした際のゴール地点の値:html,bodyのy座標「0」 画面に必要なパーツは? ...

記事を読む

no image

jQueryの読み込み

古いIEにも対応しているjQueryの読み込み方法。 <!--[if lt IE 9]> <script src="https://code.jquery.com/jq...

記事を読む

icon_surusuru

指定位置にするするスクロール

最近のサイトでは当たり前のように実装されているするするスクロールをjQueryで書いてみる。 基本:ページトップへ戻る <a id="pagetop" href=&q...

記事を読む

icon_replaceall

JSでreplaceAllと同じ処理をするには

JavaScriptで全件検索置換するにはオリジナル関数を用意する必要があります。PHPでいうreplaceAll関数が用意されていません。 全件検索置換する関数 function repla...

記事を読む

icon_h

JSでhtmlspecialcarsと同じ処理をするには

JavaScriptでHTMLで意味のある記号をエスケープするにはオリジナル関数を用意する必要があります。PHPでいうhtmlspecialchars関数が用意されていません。 HTMLで意味の...

記事を読む

icon_nl2br

JSでnl2brと同じ処理をするには

textareaのような複数行の入力値をブラウザに表示する時、改行コードをbrタグに置き換えることができると便利。PHP だと標準で用意されているnl2br関数がJavaScriptにはないので用...

記事を読む

wp
WordPressフロントページ設定とテンプレート

固定ページに最新投稿一覧を表示させた時の使用テンプレートが何なのか調べる機会があったので保存。 管理画面「設定」→「表示設定」の「フロントページの表示」 「最新の投稿」選択時 フロントページ...

js
GoogleMap左上の白い枠を消す

左上の白い枠を消してほしいという要望が多いので。よく使うマップコードをスクラップ。 <!doctype html> <html> <head>...

wp
WordPressでよく使う関数

string get_site_url( ] ] ) 管理者ページの「設定」-「一般」の「WordPressのアドレス(URL)」 現在のブログのサイトURL取得 [php]<?php ...

wp
WordPressにFacebookのいいねボタン

WordPressにFacebookのいいねボタンを表示する。 コピペで対応したい時用 <body>の直後に記述するコード <div id="fb-root&qu...

js
スムーススクロールを作る – 応用

指定位置にするするとスクロールするプログラムを作ります。 必要な値は? ページ内スクロールをした際のゴール地点「y座標」の値 画面に必要なパーツは? 高さのあるコン...

→もっと見る

    • icon_sublime1
      41,290 views

      ファイルの操作 ファイル名を検索して開く Windows:Ctrl+P Mac:Cmd+P 表示された入力欄にファイル名の一部を入力すると検索結果が表示されるので選択して開きます。 使用言語の指定 Windows:Ctrl+Shift+P Mac:Cmd+Shift+P 表示された入力欄に使用する言語名の一部を入力すると検索結果に「Set Syntax」が表示されるので選択しま...

    • 曜日番号
      18,059 views

      現在の曜日番号を表示 [php]<?php //現在の曜日番号(日:0 月:1 火:2 水:3 木:4 金:5 土:6)を取得 $weekno = date('w'); //現在の曜日番号出力 echo $weekno; ?>[/php] 現在の曜日を表示 [php]<?php //日本語の曜日配列 $weekjp = array( '日', //0 ...

    • wp
      8,632 views

      WordPressの固定ページに投稿ページの最新記事を表示する。 [php]<?php //最新5件を表示 $paged = get_query_var('paged'); //現在のページ番号 $num = 5; //表示件数 query_posts('posts_per_page='.$num.'&paged='.$paged); if ( have_posts() ) :...

    • groupby
      6,374 views

      まずここをチェック!を先に 「フィールド名=NULL」はダメ 「フィールド名 IS NULL」を使う やりたいこと 会員を全員の名前を表示したい 最新の予約日付を表示したい 使用するテーブル 会員テーブル [ps]mysql> SELECT * FROM member; +----+--------+ | id | name | +----+----...

    • icon_kaiten
      5,798 views

      jQueryのanimateメソッドを使って要素を回転させてみるプログラム。 サンプルデータ [js] $('#box1').animate( {'z-index': 1},//z-indexを0から1に変更する { duration: 1000, //アニメーションの時間 //ステップ中の処理 //引数num:処理途中の変化している値 step: f...

PAGE TOP ↑
←幅を狭くする