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

2020年9月15日

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

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

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

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

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

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

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

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

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

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

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

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

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

.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.

AI時代にHTML・CSS・Jqueryの学習は不要説

AIの進化に指をくわえて見ているだけでいいのか？

ClaudeやCodexなどのAIの進化のスピードに脅威を感じないだろうか？HTMLやCSSやjQueryなどは、ClaudeやCodexに頼めばほんの１〜２分で完成していまいます。とてもスピードでは太刀打ちできないし、人間がゼロベースからHTMLコーディングをする仕事は、いずれ終焉を迎えるでしょう。では、HTMLコーディングを学ぶ必要は無いのか？

「その答えはNOです。」

コーディングを学ぶ、その理由は？

AIでバイブコーディングをしているプロの方なら分かると思うのですが、AIが出すコードにも調整が必要な事が多々あるという事。例えば「ここはflexを使った方が後々楽になる」とか、「ここはまとめて変数で指定してほしい」など、HTMLを理解した上でAIに具体的に指示する方が圧倒的に速い。さらにちょっとした修正なら、いちいちAIに言葉を考えて説明するより「自分で修正した方が楽な場合がよくある」という事。つまりまとめると、AIにコーディングさせるなら、人間もコーディングを理解している方が圧倒的に良いという事である。

AI時代に、体系的に学ぶコーディング手法

普段ClaudeやCodexを使ってバイブコーディングをしている私が、必要と感じるHTMLの学習を、基礎からみっちり理解しつつも、最新のコーディング手法を学べ、初心者の方がついてイケるように、HTMLの基礎理論から、スマホのためのレスポンシブコーディングまでを、新しいCSSの変数やネスト記法やjQueryを使った開閉メニューの実装やFigmaデータからのコーディングの仕方など、ゼロからひと通りコーディングできるまで体系的に学べる動画講座を作りました。

「動画の無料プレビュー」もあるので、一度覗いてみてください▼