jQuery / メソッド / .hide() - 選択した要素を非表示にする

jQueryの.hide()は、選択した要素をDOM（Document Object Model、文書オブジェクトモデル）から削除せずに隠します。引数なしでは即時、時間を指定すると寸法や不透明度を変化させてから非表示にします。完了時はdisplay: noneとなり、占有していたレイアウト上の空間もなくなります。

即時の非表示と時間指定の違い

.hide()の公式仕様では引数なしとアニメーション形式を区別します。.hide()が常に400ミリ秒かかるわけではありません。引数なしは即時で、400ミリ秒という既定値はアニメーション形式のdurationです。

単位はミリ秒で、"fast"は200、"slow"は600です。時間指定では幅・高さ・不透明度などが変わるため、周囲の配置も動く場合があります。不透明度を中心に変えたいなら.fadeOut()と比較します。読者が状態変化を理解するために必要な効果を選びます。

二つのパネルを隠して戻す完全な例

全コードをUTF-8のhide-demo.htmlとして保存し、ブラウザーで開きます。コンテンツ配信ネットワーク（CDN）から公式jQuery全体版4.0.0を読むインターネット接続が必要ですが、パッケージのインストールは不要です。effectsを含まないslim版は使いません。

非表示、入力値の維持、flexの復元、途中のShow・Reset、モーション軽減を3.7.1と4.0.0で実行しました。操作ボタンは隠す領域の外にあり、非表示後も復元できます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hide and restore panels</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select, input { font: inherit; margin: 4px; max-width: 100%; }
    .panel { border: 2px solid teal; padding: 16px; margin: 12px 0; }
    #one { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  </style>
</head>
<body>
  <h1>Hide two panels without removing them</h1>
  <label for="duration">Duration:</label>
  <select id="duration"><option value="800">800 ms</option><option value="200">200 ms</option><option value="0">Instant</option></select>
  <button type="button" id="hide">Hide</button>
  <button type="button" id="show">Show</button>
  <button type="button" id="reset">Reset</button>
  <section class="panel" id="one"><label>Note <input value="Keep me"></label><span>First panel</span></section>
  <section class="panel" id="two">Second panel</section>
  <p id="phase">ready</p>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const $panels = $(".panel");
      let busy = false;
      let completed = 0;
      function report() {
        const visible = $panels.filter(":visible").length;
        $("#result").text(`visible=${visible} | in DOM=${$(".panel").length} | completed=${completed}`);
      }
      $("#hide").on("click", function () {
        if (busy || !$panels.filter(":visible").length) return;
        busy = true;
        completed = 0;
        $("#phase").text("hiding");
        const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        const duration = reduced ? 0 : Number($("#duration").val());
        $panels.hide(duration, function () {
          completed++;
          if (completed === $panels.length) {
            busy = false;
            $("#phase").text("hidden");
          }
          report();
        });
        report();
      });
      function showPanels() {
        $panels.stop(true, true).show();
        busy = false;
        completed = 0;
        $("#phase").text("ready");
        report();
      }
      $("#show").on("click", showPanels);
      $("#reset").on("click", function () {
        showPanels();
        $("#one input").val("Keep me");
      });
      report();
    });
  </script>
</body>
</html>

最初は二つのパネルが見え、文書内にも二つあります。

visible=2 | in DOM=2 | completed=0

1. NoteをEdited noteに変え、Durationを800 msにします。
2. Hideでphaseがhidingとなり、二つが縮んで消えます。完了するとhiddenで、結果はvisible=0 | in DOM=2 | completed=2です。
3. Showで両方が即座に再表示され、Edited noteと最初のパネルのflex配置が保たれます。
4. 200 msで比べます。OS・ブラウザーがモーション軽減を要求している場合、選択値の代わりに0を使います。
5. Instantは即時ですが、完了数は同じく2です。
6. 800 msの途中でShowまたはResetを押します。二つが戻り、完了数は0に初期化されます。Resetは入力値もKeep meに戻します。

Showは同じノードを表示するので入力値を初期化しません。Resetで値が変わるのは.val("Keep me")を明示しているためです。ノードが残ることと値を初期化することは別の処理です。

完了コールバックと連続操作を管理する

completeは集合全体で一回ではなく、各要素の効果が終わるたびに呼ばれます。二つならcompletedは2です。次の行のコードが自動で完了を待つわけではありません。非表示後の作業は実際の完了につなぎます。

busyは実行中の追加Hideを無視します。これはキューの蓄積を防ぐ例の設計で、.hide()固有の制限ではありません。全て非表示ならHideを無視するため、完了数も繰り返し増えません。

ShowとResetは.stop(true, true)で待機中の効果を消し、進行中の効果を即座に完了させてから.show()を呼びます。既存の完了コールバックが即時実行される場合があるので、その後でbusy・completed・phaseを初期化します。両バージョンで途中復元後に元の時間が過ぎても状態が再変化しないことを確認しました。

空間・アクセシビリティ・復元の確認

.show()は非表示前のdisplay値を戻すために使えます。flexやinlineを常にdisplay: blockで上書きする方法とは異なります。レスポンシブCSSや!importantがある場合は計算済みスタイルを調べ、クラスと一貫したCSS規則で表示を管理する方法も検討します。

display: noneはレイアウトだけでなく通常はアクセシビリティツリーからも内容を除きます。復元用ボタンを隠す領域の外に置きます。実際の画面で入力中の領域を隠すなら、フォーカスの移動先も設計します。

内容はDOMとクライアントメモリーに残るので、秘密情報の保護にはなりません。動かない場合は選択結果、全体版jQuery、非表示の祖先、Consoleのエラー、displayのCSS優先順位を確認します。空の選択には実行する要素がなく、完了コールバックも発生しません。