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

2020年9月15日

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

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

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

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

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

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

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

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

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データからのコーディングの仕方など、ゼロからひと通りコーディングできるまで体系的に学べる動画講座を作りました。

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