WP-LOAD

9/7まで 最大30％OFF 初心者編｜無料コーディング教材｜HTML・CSS・jQueryを実践で学ぶ

jQueryのfadeIn()の使い方｜表示速度・コールバック・動かない原因を初心者向けに解説

jQuery fadeInの使い方を示すアイキャッチ

ボタンを押したあとに文章や画像をふわっと表示したくても、「最初から見えてしまう」「fadeIn()を書いたのに動かない」と困ることがありますよね。

jQueryのfadeIn()は、非表示の要素を透明な状態から徐々に表示するメソッドです。表示したい要素をCSSでdisplay: none;にしておき、クリックなどのイベント内で実行します。

$('#show-button').on('click', function () {
  $('#message').fadeIn(600);
});

この記事では、基本構文から表示速度、完了後の処理、fadeOut()との使い分け、連続クリックで動きがたまる場合の対処まで、実際の表示とコードを対応させて解説します。

jQueryのfadeIn()とは

fadeIn()は、選択した要素の透明度を変化させながら表示します。完全に非表示だった要素が、薄い状態を経て見えるようになる動きです。

次の図では、非表示のカードへfadeIn()を実行し、表示されるまでの流れを確認できます。

非表示の要素をfadeInで徐々に表示する流れ

初期状態で見えている要素へ実行しても、見た目は変わりません。先にCSSのdisplay: none;またはjQueryの.hide()で隠しておくことが重要です。

fadeIn()の基本構文

$('表示したい要素').fadeIn();

引数を省略した場合の表示時間は400ミリ秒です。1000ミリ秒が1秒なので、数字が大きいほどゆっくり表示されます。

$('#message').fadeIn(1000); // 1秒かけて表示
指定意味例
duration表示にかける時間600
easing速度変化の種類'swing'、'linear'
complete表示完了後に実行する関数function () { ... }

文字列の'fast'は200ミリ秒、'slow'は600ミリ秒です。ただし、数値で書くほうが実際の時間を判断しやすくなります。

ボタンを押してメッセージをフェードインする

まずは、ボタンを押すと申し込み完了メッセージが表示される例を作ります。実際にボタンを押したあとの画面が次の画像です。

fadeInで申し込み完了メッセージを表示した画面

HTMLでボタンとメッセージを用意する

index.htmlへ操作用のボタンと、あとから表示するメッセージを記述します。aria-controlsには操作対象のidを指定します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fadeInの基本例</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <main class="demo">
      <p class="demo__label">fadeIn() の基本</p>
      <h1>隠していたメッセージを表示します</h1>
      <p class="lead">ボタンを押すと、メッセージが徐々に現れます。</p>
      <div class="actions">
        <button id="show-button" type="button"
          aria-controls="notice" aria-expanded="false">
          メッセージを表示
        </button>
      </div>
      <p id="notice" class="notice" aria-live="polite">
        お申し込みを受け付けました。
      </p>
    </main>

    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

jQuery本体を先に読み込み、そのあとに自分で作るscript.jsを読み込みます。順番が逆になると、$ is not definedというエラーが発生します。

CSSで最初は非表示にする

style.cssでメッセージへdisplay: none;を指定します。この記述がないと、ページを開いた直後からメッセージが見えてしまいます。

.notice {
  display: none;
  padding: 28px;
  border-left: 6px solid #2f66d0;
  border-radius: 20px;
  background: #edf4ff;
  font-size: 22px;
  font-weight: 700;
}

クリック時にfadeIn()を実行する

script.jsでは、ボタンのclickイベント内でfadeIn()を実行します。端末で「視差効果を減らす」設定が有効な場合は、表示時間を0にしています。

const reduceMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
const fadeDuration = reduceMotion ? 0 : 600;

$('#show-button').on('click', function () {
  $('#notice').stop(true, true).fadeIn(fadeDuration);
  $(this).attr('aria-expanded', 'true');
});

.stop(true, true)は実行中の動きと待機中の動きを終了させます。同じボタンを何度も押したときに、アニメーションがあとから繰り返されるのを防げます。

fadeIn()の完了後に処理を実行する

表示が終わってから文章を変えたい場合は、コールバック関数を使います。次の例では、結果カードの表示完了後に「表示が完了しました。」へ更新しています。

fadeIn完了後に状態を更新した画面

index.htmlには、表示ボタン、非表示ボタン、結果カード、状態を伝える欄を用意します。

<main class="demo">
  <p class="demo__label">完了後の処理</p>
  <h1>表示が終わったら状態を更新します</h1>
  <p class="lead">
    コールバック関数を使うと、フェードイン完了後の処理を指定できます。
  </p>
  <div class="actions">
    <button id="save-button" type="button" aria-controls="save-result">
      保存結果を表示
    </button>
    <button id="hide-button" class="secondary" type="button"
      aria-controls="save-result">
      隠す
    </button>
  </div>
  <section id="save-result" class="result-card" aria-live="polite">
    <strong>保存しました</strong>
    <span>入力内容は正常に保存されています。</span>
  </section>
  <p id="status" class="status"></p>
</main>

結果カードも、最初はCSSで非表示にします。

.result-card {
  display: none;
  padding: 32px;
  border-radius: 20px;
  color: #173552;
  background: linear-gradient(135deg, #e8f8f2, #f3fbff);
}

.result-card strong {
  display: block;
  margin-bottom: 10px;
  color: #16775c;
  font-size: 24px;
}

fadeIn(500, function () { ... })の第2引数へ、完了後の処理を記述します。非表示ボタンでは反対の動きをするfadeOut()を使います。

$('#save-button').on('click', function () {
  $('#status').text('表示しています…');

  $('#save-result').stop(true, true).fadeIn(500, function () {
    $('#status').text('表示が完了しました。');
  });
});

$('#hide-button').on('click', function () {
  $('#save-result').stop(true, true).fadeOut(300);
  $('#status').text('結果を隠しました。');
});

複数の要素をまとめて選択した場合、完了コールバックは要素ごとに実行されます。処理を1回だけにしたいときは、対象を1つに絞るか、アニメーション全体の完了を扱う.promise().done()を検討します。

fadeIn()・fadeOut()・fadeToggle()の違い

メソッド動き使う場面
fadeIn()非表示から表示完了メッセージを見せる
fadeOut()表示から非表示通知やカードを隠す
fadeToggle()表示と非表示を切り替える同じボタンで開閉する
fadeTo()指定した透明度まで変える半透明の状態を残す

fadeIn()とfadeOut()は、役割がコードから読み取りやすい書き方です。1つのボタンで開閉する場合だけfadeToggle()を使うと、意図が分かりやすくなります。

$('#toggle-button').on('click', function () {
  $('#panel').stop(true, true).fadeToggle(400);
});

開閉状態をボタンへ伝える必要があるUIでは、aria-expandedも同時に更新します。表示だけを切り替えて、操作状態の伝達を忘れないようにしましょう。

jQueryで特定の要素を隠すことができるhideメソッドの使い方と使用例

プロフィールを切り替えて表示する実用例

実際の制作では、選択したタブや絞り込み結果だけをフェードインする使い方があります。次の例では「エンジニア」を選び、対応するプロフィールを表示しています。

fadeInでエンジニアのプロフィールへ切り替えた画面

index.htmlでは、各ボタンのdata-profileと表示対象のidを対応させます。

<div class="actions profile-tabs" aria-label="プロフィールを選択">
  <button type="button" data-profile="designer" aria-pressed="true">
    デザイナー
  </button>
  <button type="button" data-profile="engineer" aria-pressed="false">
    エンジニア
  </button>
</div>

<section id="designer" class="profile-card is-visible">
  <div class="avatar" aria-hidden="true">D</div>
  <div>
    <h2>Webデザイナー</h2>
    <p>配色と余白を整え、迷わず操作できる画面を設計します。</p>
  </div>
</section>

<section id="engineer" class="profile-card">
  <div class="avatar" aria-hidden="true">E</div>
  <div>
    <h2>フロントエンドエンジニア</h2>
    <p>HTML・CSS・JavaScriptで、使いやすいWebサイトを実装します。</p>
  </div>
</section>

プロフィールカードは通常は非表示にし、.is-visibleが付いた要素だけをグリッドレイアウトで表示します。

.profile-card {
  display: none;
  border-radius: 20px;
}

.profile-card.is-visible {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  align-items: center;
  padding: 32px;
  background: linear-gradient(135deg, #fff2f5, #f4f1ff);
}

@media (max-width: 640px) {
  .profile-card.is-visible {
    grid-template-columns: 1fr;
  }
}

クリックされたボタンから対象の名前を取得し、いったん全カードを隠してから選択されたカードを表示します。

$('.profile-tabs button').on('click', function () {
  const targetId = $(this).data('profile');

  $('.profile-tabs button').attr('aria-pressed', 'false');
  $(this).attr('aria-pressed', 'true');

  $('.profile-card').removeClass('is-visible').hide();
  $(`#${targetId}`)
    .addClass('is-visible')
    .hide()
    .stop(true, true)
    .fadeIn(450);
});

.stop(true, true)を入れているため、ボタンを素早く切り替えても待機中のアニメーションが残りません。aria-pressedは、現在選ばれているボタンを支援技術へ伝えます。

共通の見た目を整えるCSS

3つの表示例では、次のCSSを共通で使用しています。先ほど紹介した各部品のCSSと一緒にstyle.cssへ記述してください。

:root {
  color: #172033;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #eef3fb;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 48px 24px;
  display: grid;
  place-items: center;
}

.demo {
  width: min(920px, 100%);
  min-height: 560px;
  padding: 56px;
  border: 1px solid #dce4f1;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 70px rgb(52 72 112 / 12%);
}

.demo__label {
  margin: 0 0 12px;
  color: #2f66d0;
  font-weight: 700;
  letter-spacing: .08em;
}

h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.25;
}

.lead {
  margin: 18px 0 32px;
  color: #56627a;
  font-size: 20px;
  line-height: 1.8;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

button {
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #2f66d0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button.secondary,
button[aria-pressed="false"] {
  color: #33415f;
  background: #e9eef8;
}

button:focus-visible {
  outline: 4px solid #f5bd42;
  outline-offset: 3px;
}

動きを減らす設定へ対応する

アニメーションによって不快感を覚える人もいます。端末の「視差効果を減らす」設定をprefers-reduced-motionで確認し、必要な場合は表示時間を0にします。

const reduceMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

const duration = reduceMotion ? 0 : 500;
$('#message').fadeIn(duration);

サイト全体のjQueryエフェクトを止める場合は$.fx.off = true;も使えます。ただし、すべてのエフェクトへ影響するため、共通設定として意図して使う場合に限りましょう。

fadeIn()が動かないときの確認ポイント

対象が最初から表示されている

fadeIn()は非表示の要素を表示する処理です。対象へdisplay: none;が付いているか、ブラウザの開発者ツールで確認します。

セレクタがHTMLと一致していない

#messageはid="message"、.messageはclass="message"を選びます。記号、英字の大文字・小文字、ハイフンまで一致させてください。

jQueryより先にscript.jsを読み込んでいる

HTMLの末尾で、jQuery本体、script.jsの順に読み込みます。head内で実行する場合は、DOMの準備が終わってから処理してください。

$(function () {
  $('#show-button').on('click', function () {
    $('#message').fadeIn(600);
  });
});

slim版のjQueryを読み込んでいる

jQueryのslim版にはeffectsモジュールが含まれないため、fadeIn()は使えません。URLにslimが入っていない通常版を読み込みます。

<!-- fadeIn()を使える通常版 -->
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>

連続クリックで動きが遅れている

jQueryのアニメーションは順番待ちのキューへ入ります。クリックするたびに処理を追加すると、操作をやめたあとも動き続けることがあります。

$('#message').stop(true, true).fadeIn(500);

最初のtrueは待機中の処理を削除し、2つ目のtrueは実行中の処理を最終状態まで進めます。そのあとに新しいfadeIn()を開始します。

jQueryのclickイベントの使い方｜on()・動的要素・アコーディオンを初心者向けに解説

fadeIn()についてよくある質問

ページを開いたときに自動で表示できますか？

できます。対象をCSSで非表示にしておき、DOMの準備後にfadeIn()を実行します。ただし、本文などの重要な情報を最初から隠すと、JavaScriptが動かなかった場合に読めなくなるため注意が必要です。

$(function () {
  $('#welcome-message').fadeIn(600);
});

透明度を50%まで変えられますか？

fadeIn()は最終的に不透明な状態まで表示します。半透明で止めたい場合は、最終的な透明度を指定できるfadeTo()を使います。

$('#photo').fadeTo(500, 0.5);

CSSアニメーションとどちらを使えばよいですか？

すでにjQueryを利用しているサイトで、単純な表示・非表示を短いコードで追加するならfadeIn()が使いやすいでしょう。新規制作で複雑な見た目を作る場合は、CSSのtransitionやanimationも選択肢になります。

jQueryのanimate()の使い方｜要素を動かす方法と効かない原因を初心者向けに解説

まとめ

jQueryのfadeIn()は、非表示の要素を透明な状態から徐々に表示するメソッドです。対象をCSSのdisplay: none;で隠し、clickイベントなどの中で実行します。

表示時間はミリ秒で指定でき、完了後の処理はコールバック関数へ記述します。連続操作がある画面では.stop(true, true)を組み合わせ、動きを減らす端末設定にも配慮すると、実際の制作で使いやすい表示になります。