jQuery / Method / .fadeIn() - 選択した要素を徐々に表示するメソッド

jQueryの .fadeIn() は、隠れた要素を表示しながら不透明度を徐々に高めます。.fadeIn(800) の800は開始前の待ち時間ではなく、効果が進む800ミリ秒です。完了後の処理は呼び出し直後の行ではなく、完了コールバックに置きます。

実行時間・easing・完了を理解する

.fadeIn() の公式文書には .fadeIn(duration, easing, complete) の形があり、任意の引数は省略できます。durationの数値が大きいほどゆっくり表示します。completeは要素の効果が終わったときの関数です。

easingは進行中の速度変化を定め、既定はswing、一定の進行にはlinearを使います。linearだけを時間の位置に入れず、.fadeIn(800, "linear") のように時間の後で指定します。全体例は既定のeasingです。

2枚の通知を表示する完全な例

全コードをUTF-8の fadein-demo.html に保存し、ブラウザーで開きます。インストールは不要ですが、CDN（Content Delivery Network、コンテンツ配信ネットワーク）から公式jQueryの完全版を読む接続が必要です。slim版はeffectsを除き.fadeIn()がないため、完全版を使います。

コードは4.0.0です。中間の不透明度、800・200ミリ秒、要素ごとの完了、途中リセットと即時表示を3.7.1と4.0.0で実行確認しました。OSが動きを減らす設定なら段階的な効果を省きます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fade in two notice panels</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    .panel { display: none; padding: 16px; margin: 12px 0; background: #e4f3f1; }
    button, select { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Fade in two notice panels</h1>
  <label for="duration">Duration:</label>
  <select id="duration">
    <option value="800">800 ms</option>
    <option value="200">200 ms</option>
  </select>
  <label><input type="checkbox" id="instant"> Show instantly</label>
  <button type="button" id="show">Show notices</button>
  <button type="button" id="reset">Reset</button>
  <div id="notices">
    <div class="panel" id="one">Notice one</div>
    <div class="panel" id="two">Notice two</div>
  </div>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const $panels = $("#notices > .panel");
      let completed = 0;
      function report(state) {
        $("#result").text(`state=${state} | completed=${completed}`);
      }
      function clearPanels() {
        $panels.stop(true, false).hide().css("opacity", "");
        completed = 0;
      }
      $("#show").on("click", function () {
        clearPanels();
        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        const duration = $("#instant").prop("checked") || reduce
          ? 0 : Number($("#duration").val());
        $("#show").prop("disabled", true);
        report("showing");
        $panels.fadeIn(duration, function () {
          completed++;
          if (completed === $panels.length) {
            report("visible");
            $("#show").prop("disabled", false);
          } else {
            report("showing");
          }
        });
      });
      $("#reset").on("click", function () {
        clearPanels();
        $("#show").prop("disabled", false);
        report("hidden");
      });
      report("hidden");
    });
  </script>
</body>
</html>

初期状態では両パネルがdisplay: noneで、結果は次のとおりです。

state=hidden | completed=0

1. Show instantly をオフ、Durationを800 msにして Show notices を押します。2枚が一緒に表示され、進行中は表示ボタンが無効になります。
2. 完了すると両方が見え、state=visible | completed=2 です。2はクリック数ではなく完了要素数です。
3. Reset 後に200 msで再実行すると、同じ結果に速く到達します。選択欄を変えるだけでは実行中の効果は変わりません。
4. 800 msの途中で Reset を押すと直ちに隠れ、state=hidden | completed=0 に戻ります。元の時間が経過しても古い完了表示は戻りません。
5. Show instantly をオンにすると時間0で即時表示します。OSの動きを減らす設定を検出した場合も同じです。

フェードしなければ、まず即時表示のチェックとprefers-reduced-motion の設定を確認します。この例は動きの削減を優先するため、800を選んでも即座に表示されることがあります。

完了コールバックは要素ごとに動く

.fadeIn()は完了まで後続JavaScriptを止めません。次の行で完了と表示すると、効果の途中なのに終了したように見えます。例ではコールバック内でcompletedを増やし、実際の完了を数えます。

2枚のパネルはそれぞれ1回コールバックを実行します。集合全体に1回だけ呼ばれる関数ではありません。completedが$panels.lengthに達したときだけvisibleと表示し、ボタンを有効化します。この集合は実習中は変更しません。通常の関数のthisは完了したDOM要素です。

途中リセットとトラブルの確認

.stop(true, false)のtrueは残りの効果キューを削除し、falseは現在の効果を完了させず停止します。完了コールバックも呼ばないため、Reset後に古い完了が割り込みません。.hide()で隠し、途中に残るインラインopacityを除き、数を0に戻します。

再実行前にも同じ整理をして隠れた状態から始めます。実行中のボタン無効化でクリックによるキューの蓄積を防ぎます。対象はこのパネルと数だけで、全体の効果設定は変えません。

動かなければNetworkで完全版の読み込み、Consoleで.fadeIn is not a functionなどのエラーを確認します。空の選択では要素別コールバックもありません。visibility: hidden、隠れた祖先、強いdisplayルールも調べます。不透明度の変更だけですべての非表示条件が解除されるわけではありません。