jQuery / Methode / .hide() - Ausgewählte Elemente ausblenden

jQuerys .hide() blendet ausgewählte Elemente aus, ohne sie aus dem Document Object Model (DOM) zu entfernen. Ohne Argument geschieht das sofort; mit Dauer ändern sich Abmessungen und Deckkraft vor dem Ausblenden. Am Ende entfernt display: none auch den belegten Platz im Layout.

Sofortiges Ausblenden und zeitgesteuerter Effekt

Die .hide()-Dokumentation unterscheidet den Aufruf ohne Argument von Animationsformen. .hide() dauert nicht grundsätzlich 400 Millisekunden. Ohne Argument erfolgt es sofort; der Standardwert 400 gilt für duration der Animationsform.

Die Einheit ist Millisekunden; "fast" bedeutet 200, "slow" 600. Der zeitgesteuerte Effekt verändert unter anderem Breite, Höhe und Deckkraft, sodass sich umliegendes Layout bewegen kann. Vergleichen Sie .fadeOut(), wenn eine Änderung der Deckkraft besser passt. Entscheidend ist, welche Veränderung das Verständnis unterstützt.

Vollständiges Beispiel mit zwei Bereichen

Speichern Sie alles in UTF-8 als hide-demo.html und öffnen Sie es im Browser. Zum Laden der offiziellen vollständigen jQuery-Datei 4.0.0 vom Content Delivery Network (CDN) benötigen Sie Internet, aber keine Paketinstallation. Die slim-Ausgabe ohne Effekte eignet sich nicht.

Ausblenden, Eingabewerte, Flex-Wiederherstellung, Show/Reset während der Animation und reduzierte Bewegung wurden mit 3.7.1 und 4.0.0 ausgeführt. Die Bedienbuttons bleiben außerhalb der ausgeblendeten Bereiche und damit zur Wiederherstellung verfügbar.

<!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>

Anfangs sind zwei Bereiche sichtbar und im Dokument vorhanden:

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

1. Ändern Sie Note zu Edited note und lassen Sie Duration auf 800 ms.
2. Hide setzt phase auf hiding und beide Bereiche schrumpfen weg. Nach Abschluss lautet phase hidden und das Ergebnis visible=0 | in DOM=2 | completed=2.
3. Show zeigt beide sofort wieder mit Edited note. Auch das Flex-Layout des ersten Bereichs kehrt zurück.
4. Vergleichen Sie mit 200 ms. Fordert Betriebssystem/Browser reduzierte Bewegung an, nutzt der Code stattdessen null.
5. Instant blendet sofort aus und erreicht ebenfalls zwei Abschlüsse.
6. Drücken Sie während eines 800-ms-Effekts Show oder Reset. Beide Bereiche erscheinen und completed wird null. Reset setzt zusätzlich den Eingabewert auf Keep me.

Show zeigt dieselben Knoten und setzt die Eingabe nicht zurück. Reset verändert sie durch den ausdrücklichen Aufruf .val("Keep me"). Einen verborgenen Knoten zu behalten und seine Werte zurückzusetzen sind getrennte Vorgänge.

Abschluss und wiederholte Eingaben verwalten

complete läuft je Element nach dessen Abschluss, nicht nur einmal für die Auswahl. Zwei Bereiche ergeben completed=2. Die nächste Codezeile wartet nicht automatisch auf die Animation. Verknüpfen Sie abhängige Arbeit mit dem tatsächlichen Ende.

busy ignoriert zusätzliche Hide-Anforderungen während des Laufs. Das ist die Warteschlangenstrategie des Beispiels, keine eingebaute .hide()-Regel. Sind bereits alle Bereiche verborgen, wird Hide ebenfalls ignoriert und erhöht den Zähler nicht erneut.

Show und Reset leeren mit .stop(true, true) ausstehende Effekte und beenden den aktuellen sofort, bevor sie .show() aufrufen. Vorhandene Abschlussrückrufe können dabei sofort laufen; deshalb werden busy, completed und phase anschließend zurückgesetzt. Beide Versionen zeigten nach einer unterbrochenen Wiederherstellung keine spätere Änderung bei Ablauf der ursprünglichen Dauer.

Layout, Barrierefreiheit und Wiederherstellung prüfen

.show() kann den vorherigen display-Wert wiederherstellen. Das unterscheidet sich vom pauschalen Überschreiben von flex oder inline mit display: block. Prüfen Sie bei responsiven Regeln und !important die berechneten Stile. Eine Klasse mit konsistenter CSS-Regel kann dafür besser geeignet sein.

display: none entfernt Inhalt aus dem Layout und normalerweise aus dem Barrierefreiheitsbaum. Lassen Sie die Wiederherstellung außerhalb des verborgenen Bereichs erreichbar. Wenn eine echte Oberfläche einen gerade bearbeiteten Bereich ausblendet, planen Sie auch das neue Fokusziel.

Inhalt bleibt im DOM und im Clientspeicher; Ausblenden schützt keine Geheimnisse. Prüfen Sie bei Problemen Auswahl, vollständige jQuery-Datei, verborgene Vorfahren, Console-Fehler und CSS-Vorrang von display. Eine leere Auswahl hat kein zu animierendes Element und liefert keinen Abschlussrückruf.