【jQuery】要素をフェードイン・フェードアウトさせる完全ガイド｜fadeIn・fadeOut・fadeToggle・CSSトランジション比較まで

jQueryの fadeIn()・fadeOut()・fadeToggle() を使うと、要素を滑らかに表示・非表示にできます。この記事では基本的な使い方・速度・コールバック・複数要素・CSSトランジションとの比較・パフォーマンスまで解説します。

フェードメソッドの比較

基本的な使い方

$(function () {
  // フェードイン（非表示→表示）
  $('#box').fadeIn();          // デフォルト400ms
  $('#box').fadeIn(600);       // 600msでフェードイン
  $('#box').fadeIn('slow');    // 'slow'=600ms / 'fast'=200ms

  // フェードアウト（表示→非表示）
  $('#box').fadeOut();         // 400ms
  $('#box').fadeOut(800);      // 800msでフェードアウト

  // フェードトグル（表示↔非表示を切り替え）
  $('#toggle-btn').on('click', function () {
    $('#box').fadeToggle(400);
  });

  // fadeTo(): 指定したopacityまで変化（display:noneにならない）
  $('#box').fadeTo(400, 0.3); // 30%の透明度まで
  $('#box').fadeTo(400, 1);   // 不透明に戻す
});

コールバック：フェード後に処理を実行する

$(function () {
  // フェードアウト後にDOMから削除
  $('#notification').fadeOut(400, function () {
    $(this).remove();
  });

  // フェードアウト後に別の要素をフェードイン
  $('#old-content').fadeOut(300, function () {
    $('#new-content').fadeIn(300);
  });

  // フェードイン後にクラスを追加
  $('#box').fadeIn(500, function () {
    $(this).addClass('is-visible');
  });
});

複数要素を順番にフェードさせる

$(function () {
  // 複数要素を遅延付きで順番にフェードイン
  $('.fade-item').each(function (i) {
    $(this).delay(i * 150).fadeIn(400);
  });

  // Promise で順番に処理（チェーン）
  var $items = $('.fade-item');
  var promise = $.when();
  $items.each(function () {
    var $el = $(this);
    promise = promise.then(function () {
      return $el.fadeIn(300).promise();
    });
  });
  promise.then(function () {
    console.log('全要素のフェードイン完了');
  });
});

CSSトランジションとの比較

/* CSSトランジションでフェード（display:noneの代替） */
.box {
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: auto;
}
.box.is-hidden {
  opacity: 0;
  pointer-events: none; /* クリックも無効化 */
}

// CSSトランジションをjQueryで制御
$('#toggle-btn').on('click', function () {
  $('#box').toggleClass('is-hidden');
});

実用パターン：通知バナー・モーダル・スケルトン

$(function () {
  // 通知バナー: 3秒後に自動フェードアウト
  function showNotice(message, type) {
    var $notice = $('<div class="notice notice-' + type + '">')
      .text(message) // XSS対策: text()でエスケープ
      .appendTo('#notice-area');
    $notice.hide().fadeIn(300).delay(3000).fadeOut(400, function () {
      $(this).remove();
    });
  }
  showNotice('保存しました', 'success');

  // モーダル: フェードイン表示・フェードアウト非表示
  $('#open-modal').on('click', function () {
    $('#modal-overlay').fadeIn(200);
    $('#modal').fadeIn(300);
  });
  $('#close-modal, #modal-overlay').on('click', function () {
    $('#modal').fadeOut(200);
    $('#modal-overlay').fadeOut(300);
  });

  // スケルトンからコンテンツへの切り替え
  function loadContent() {
    $('#skeleton').fadeOut(200, function () {
      $('#content').fadeIn(300);
    });
  }
});

まとめ

jQueryのフェードメソッドのポイントをまとめます。

• fadeIn(duration): display:none から表示（opacity 0→1）
• fadeOut(duration, callback): 非表示にして display:none
• fadeToggle(): 現在の状態を反転
• fadeTo(duration, opacity): 指定した透明度まで変化（display:noneにならない）
• パフォーマンス重視ならCSSトランジション + クラス切り替えが推奨

関連記事: animate()・fadeIn/Out・slideToggle完全ガイド / CSSアニメーション終了時に処理を行う完全ガイド

よくある質問（FAQ）