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

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

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

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

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

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

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

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

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

.hide()/.fadeOut()の機能とは？

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

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

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

フェードアウトした要素は、CSSのスタイル上、displayがnoneの状態になるので、要素そのものの「高さや幅のスペース」も無い状態となる点に留意しておこう。

diplay:none;ではなく、単純に透明度だけ変更したい場合は、.fadeTo()メソッドを使おう。

jQuery｢.fadeTo()｣で指定要素の透明度を変更する方法

▶ jQuery｢.fadeTo()｣で指定要素の透明度を変更する方法

jQueryの「.fadeTo()」は、指定要素の透明度を変更する事ができるメソッド今回は、jQueryの「.fade…

逆に非表示要素をフェードイン表示させる事ができるメソッド.show()については、こちらの記事を参考にしよう。

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

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

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

.hide()と.fadeOut()の違い

.hide()と.fadeOut()の違いは消え方が違うだけ。

.hide()と.fadeOut()の違い

２つの違いはhide()が上にスライドしながら消えていくのに対して、.fadeOut()は、その場でフワッと消える

.hide()/.fadeOut()の構文

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

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

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

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

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

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

$("セレクタ").hide(3000);
$("セレクタ").fadeOut(3000);

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

.hide().fadeOut()の引数にコールバック関数を入れる事で、非表示になった後に何かの処理を加える事ができる。

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

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

.hide()/.fadeOut()の使用例

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

ボタンクリックで、サンプルテキストをフェードアウトで非表示にする例で見ていこう。

たとえば次のようなHTMLがあったとする。（基本的に.hide()/.fadeOut()共に記述は同じなので、fadeOut()の場合は、.hide()部分を置き換えてればOK）

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

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

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

See the Pen wvGXZEX by stand4u (@stand4u) on CodePen.

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

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

コールバック関数を使って、フェードアウトさせた後に、再度表示させる例

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

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

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

この時指定要素はdisplayがnoneの状態となるので、コールバック関数で、class="target"のCSSのdisplayをblockに戻す処理を加える事で、再び表示されることになる。

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

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

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

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

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

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

その他の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_ をフォロー

新着記事