jQuery / Method / .fadeToggle() - 各要素の表示状態を反転するメソッド

jQueryの .fadeToggle() は、見える要素を徐々に隠し、隠れた要素を徐々に表示します。複数選んでも集合全体を同じ状態にせず、各要素の現在状態を反転します。必ず表示したいなら.fadeIn()、必ず隠したいなら.fadeOut()を使います。

要素ごとの反転と引数

.fadeToggle() の公式文書は .fadeToggle(duration, easing, complete) の任意引数を示しています。durationは実行時間で、既定400ミリ秒、"fast"は200、"slow"は600です。大きい数ほど遅く、開始前の待ち時間ではありません。

easingの既定はswingです。一定の進行なら .fadeToggle(800, "linear") のように時間の後に指定し、linearだけを時間の位置に入れません。completeは表示・非表示どちらの方向でも、その要素の効果が終わった後に動きます。

.fadeIn()・.fadeOut()と違い、反転を2回完了すると元へ戻ります。非表示完了はdisplay: noneとなり領域も消えますが、DOM要素は削除しません。

逆の初期状態を持つ完全な例

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

コードは4.0.0です。状態反転、linearの進行、完了集計、連続入力制限、リセット後の再実行を3.7.1と4.0.0で確認しました。oneは最初に表示、twoはCSSで隠し、操作ボタンはパネル外に置きます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toggle each tile's visibility</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    .tile { padding: 20px; margin: 12px 0; background: #e4f2ef; }
    #two { display: none; }
    button, select { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Toggle each tile's visibility</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"> Toggle instantly</label>
  <button type="button" id="toggle" aria-controls="one two">Toggle both</button>
  <button type="button" id="reset">Reset</button>
  <div id="tiles">
    <div class="tile" id="one">Tile one starts visible</div>
    <div class="tile" id="two">Tile two starts hidden</div>
  </div>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const $tiles = $("#tiles > .tile");
      let busy = false;
      let completed = 0;
      function report() {
        const ids = $tiles.filter(":visible").map((_, tile) => tile.id).get().join(", ");
        $("#result").text(`visible=${ids || "none"} | completed=${completed}`);
      }
      $("#toggle").on("click", function () {
        if (busy || !$tiles.length) return;
        busy = true;
        completed = 0;
        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        const duration = $("#instant").prop("checked") || reduce
          ? 0 : Number($("#duration").val());
        $("#result").text("animating | completed=0");
        $tiles.fadeToggle(duration, "linear", function () {
          completed++;
          if (completed === $tiles.length) {
            busy = false;
            report();
          }
        });
      });
      $("#reset").on("click", function () {
        $tiles.stop(true, true).hide().css("opacity", "");
        $("#one").show();
        busy = false;
        completed = 0;
        report();
      });
      report();
    });
  </script>
</body>
</html>

初期状態はoneだけが見えます。

visible=one | completed=0

1. Toggle instantly をオフ、800 msで Toggle both を押します。oneは消え、twoは現れ、途中はanimatingです。
2. 両方完了すると visible=two | completed=2 です。completedはクリック数ではなく完了要素数です。
3. もう一度完了すると visible=one | completed=2 へ戻ります。受け付けた実行ごとに数を0から始めます。
4. 200 msなら速く反転します。途中の追加クリックは例のbusy検査で無視します。
5. 途中で Reset を押すとone表示・two非表示・completed=0に戻ります。次のToggle bothでtwoが見えることまで確認します。
6. Toggle instantly または動きを減らす設定なら時間0です。ネイティブbuttonはフォーカス後のEnterにも対応します。

完了集計と連続入力の方針

.fadeToggle()は完了まで後続JavaScriptを止めません。コールバックは選択要素ごとに1回なので、completedが$tiles.lengthに達したときだけ見えるIDを表示します。隠す効果の終了も正常完了です。

busyは実習で作ったフラグで、jQueryの引数ではありません。開始で真、両方完了で偽にします。途中で直ちに逆方向へ動かすのではなく、現在の効果を終えるまで追加入力を無視する設計です。すべての要求をキューへ蓄積する方式と分けて考えます。

「開く」ボタンで常に開くなら、トグルではなく表示方向を明示します。異なる初期状態のパネルを全部同じ状態にそろえる場合も.fadeIn()か.fadeOut()を選びます。

リセット順序と問題の確認

Resetの.stop(true, true)は、最初のtrueでキューを消し、次のtrueで現在の効果を即座に完了します。完了コールバックもそこで動き得ます。その後で両方を隠し、oneだけを表示し、busyとcompletedを初期化して最終結果を出します。古い完了が復元値を書き換えない順序です。

トグルは途中の状態も追跡します。途中停止してCSSだけ初期状態らしくしても、次の実行まで確認せず完了とは判断できません。この例は現在の効果を終えてから既知の表示状態を明示し、リセット直後と次の反転を確認しています。

逆に見えるなら初期CSSと現在のdisplayを確認します。動かなければ即時オプションと動きの削減、メソッドのエラーなら完全版の読み込みとConsoleを調べます。空集合では要素別完了もないため、開始前に.lengthを検査します。