WEBデザイン・プログラミング関連の
情報発信を手掛ける STAND4U

HOME > WEB制作 > javascript > jQuery｢.show( )/.fadeIn()｣で指定要素をフェードインで表示する方法

jQuery｢.show( )/.fadeIn()｣で指定要素をフェードインで表示する方法

［景品表示法に基づく表記］ 本コンテンツにはプロモーションが含まれています。

あわせて読みたい記事
【2021年】現役プロが比較 ｢WEBデザインスクール12校｣おすすめランキング！

現役プロが比較 ｢WEBデザインスクール12校｣おすすめランキング！

WEBデザインスクール選びで絶対失敗したくない！プロの目線でおすすめを教えて！

jQueryの「.show( )/.fadeIn()」は、指定要素をフェードイン表示する事ができるメソッド

今回は、jQueryの「.show( )/.fadeIn()」について、その使い方をサンプルを交えて解説しよう。

.show()/.fadeIn()の機能とは？

.hide()/.fadeIn()の機能

.show()/.fadeIn()は、「display:none状態の見えない要素をフェードイン表示する」事ができる。

双方ともにフェードインさせるには、引数ミリ秒を入れるだけで、逆に引数に何も入れなければ、瞬時に表示される。

フェードインする対象としては、CSSのスタイル上、display:noneの状態にあるもの、もしくはで.hide()メソッドで「非表示状態」となっているものである点を留意しておこう。

jQuery｢.hide( )/.fadeOut()｣で指定要素をフェードアウト非表示にする方法

▶ jQuery｢.hide( )/.fadeOut()｣で指定要素をフェードアウト非表示にする方法

jQueryの「.hide()/.fadeOut()」は、指定要素をフェードアウトしながら非表示にする事ができるメソッ…

.show()/.fadeIn()の違い

.show()/.fadeIn()の違いは、その表示される時にアニメーションが違うだけ

.show()/.fadeIn()の違い

.show()は上から下に向かってアニメーションしながら表示するのに対し、fadeIn()はその場でフワッと表示する

.show()/.fadeIn()の構文

.show()の構文は次のような記述となる

$("セレクタ").show();

.fadeIn()の構文は次のような記述となる

$("セレクタ").fadeIn();

引数にミリ秒を指定して、フェードインさせる構文

.show().fadeIn()に引数を「ミリ秒」で指定してフェードインさせるには次のように()内にミリ秒の数値を半角英数で入れるだけ。（1秒は1000ミリ秒）

$("セレクタ").show(3000);
$("セレクタ").fadeIn(3000);

引数にコールバック関数を指定できる

.show().fadeIn()の引数にコールバック関数を入れる事で、フェードイン表示された後に何かの処理を加える事ができる。

$("セレクタ").show(3000, function(){
  // 非表示後に加えたい処理
});
$("セレクタ").fadeIn(3000, function(){
  // 非表示後に加えたい処理
});

.show()/.fadeIn()の使用例

ボタンクリックで対象をフェードインさせる例

ボタンクリックで、サンプルテキストをフェードイン表示する例で見ていこう。（基本的に.show()/.fadeIn()共に記述は同じなので、fadeIn()の場合は、.show()部分を置き換えてればOK）

HTML
<button>非表示にする</button>
<p class="target">サンプルテキスト</p>
jQuery
$(function(){
 $('button').on('click', function() {
  $('.target').show(1000);
 });
});

この例ではbuttonをクリックする事で、class="target"にあたる「サンプルテキスト」が1000ミリ秒（１秒）でフェードインする。

.show()の実際の動きをcodePenで見てみよう。

See the Pen show()01 by stand4u (@stand4u) on CodePen.

.fadeIn()の実際の動きをcodePenで見てみよう。

See the Pen fadeIn()01 by stand4u (@stand4u) on CodePen.

フェードインさせた後に、コールバック関数を使う例

ボタンクリックで、サンプルテキストをフェードイン表示し、さらにコールバック関数を使ってテキストの色を赤色に変更する例を見ていこう。（基本的に.show()/.fadeIn()共に記述は同じなので、fadeIn()の場合は、.show()部分を置き換えてればOK）

HTML
<button>非表示にする</button>
<p class="target">サンプルテキスト</p>
jQuery
$(function(){
  $('button').on('click', function() {
    $('.target').show(1000, function(){
      $('this').css("color","red");
    });
  });
});

この例ではdisplay:none;で非表示状態にある要素をbuttonをクリックする事で、1000ミリ秒（１秒）でフェードインする。

さらにコールバック関数で、class="target"のCSSのcolorをredに変える処理を加える事で、表示されたテキストの色が赤色に変わる。

.show()の実際の動きをcodePenで見てみよう。

See the Pen show()02 by stand4u (@stand4u) on CodePen.

.fadeIn()の実際の動きをcodePenで見てみよう。

See the Pen fadeIn()02 by stand4u (@stand4u) on CodePen.

jQuery｢.show()/.fadeIn()｣で指定要素をフェードイン表示する方法のまとめ

以上が、jQueryで｢.show()/.fadeIn()｣で指定要素をフェードイン表示にする方法でした。

その他のjQueryメソッドについて確認したい方は、jQueryメソッドを一覧で解説したこちらの記事を確認しておこう！

jQueryの「メソッド一覧」と使い方

▶ jQueryの「メソッド一覧」と使い方

jQueryの沢山あるメソッドの一覧を解説してほしいjQueryのメソッド一覧を確認して、jQueryを自由に操れるよ…

※当記事の掲載内容は執筆現在の個人の見解・調査によるもので、動作・サービス等を保証するものではありません。最新情報は各公式サイトでご確認頂き、購入・契約・データ作成等はご自身の判断・責任でお願いします。 免責事項

関連記事

WEBデザイン動画講座
YouTubeで学ぶWEBデザイン Uチャンネル Powerd by STAND4U
超短期1日集中 オンラインWEBデザインマンツーマン講座

ナビゲーション

この記事を書いた人

編集長

WEBデザイン・グラフィックデザイン歴：約18年、HTMLコーディング、jquery、wordpress、イラストなど本業とし、WEBデザインコンサル・プログラミング・ライティング等にも勤しんでいます

プロフィールはこちら

WEBデザイン作品集はこちら

Twitter @stand_4u_ をフォロー

新着記事