jQuery / Method / .fadeOut() - Elemente allmählich ausblenden

jQuerys .fadeOut() senkt die Deckkraft und setzt anschließend display auf none. Das Verschwinden aus Anzeige und Layout löscht das DOM-Element nicht; es lässt sich erneut anzeigen. Für echtes Entfernen rufen Sie .remove() im Abschlusscallback nach dem Effekt auf.

Ausblenden, Löschen und Dauer unterscheiden

Die Dokumentation zu .fadeOut() beschreibt display: none am Ende, wodurch auch der Layoutplatz entfällt. Währenddessen sinkt die Deckkraft, ohne dass die Höhe allmählich zusammenklappt. Entfernen aus dem Document Object Model (DOM) ist eine separate Operation.

Die Form .fadeOut(duration, easing, complete) besitzt optionale Argumente. Standarddauer ist 400 ms, "fast" bedeutet 200 und "slow" 600. .fadeOut(800) blendet über 800 ms aus, statt vorher so lange zu warten. Standard-easing ist swing; für gleichmäßigen Verlauf folgt "linear" hinter der Dauer.

Vollständiges Beispiel mit bearbeitbarer Eingabe

Speichern Sie alles als UTF-8 in fadeout-demo.html und öffnen Sie es im Browser. Keine Installation ist nötig, aber Internet zum Laden der offiziellen vollständigen jQuery-Distribution über das Content Delivery Network (CDN). Slim enthält das Effektmodul nicht; verwenden Sie die vollständige Datei.

Der Code verwendet 4.0.0. Ausblenden, Entfernen, Eingaben, Wiederherstellen und unterbrochener Reset wurden mit 3.7.1 und 4.0.0 ausgeführt. Die Steuerelemente liegen außerhalb des Hinweises, damit Restore und Reset nach seinem Verschwinden erreichbar bleiben.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fade out versus remove</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    #notice { padding: 20px; background: #e5f2f0; margin: 16px 0; }
    button, select, input { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Fade out versus remove</h1>
  <label for="duration">Duration:</label>
  <select id="duration"><option value="800">800 ms</option><option value="0">0 ms</option></select>
  <button type="button" id="fade">Fade only</button>
  <button type="button" id="remove">Fade then remove</button>
  <button type="button" id="restore">Restore</button>
  <button type="button" id="reset">Reset</button>
  <div id="host">
    <div id="notice">
      <p>A temporary notice</p>
      <label>Note: <input id="note" value="Keep me"></label>
    </div>
  </div>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const initialHtml = $("#host").html();
      function enable() {
        $("#fade, #remove").prop("disabled", false);
      }
      function report(state) {
        $("#result").text(`state=${state} | nodes=${$("#notice").length}`);
      }
      function fade(removeAfter) {
        const $notice = $("#notice");
        if (!$notice.length) {
          report("missing");
          return;
        }
        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        const duration = reduce ? 0 : Number($("#duration").val());
        $notice.stop(true, false);
        $("#fade, #remove").prop("disabled", true);
        report("fading");
        $notice.fadeOut(duration, function () {
          if (removeAfter) $(this).remove();
          enable();
          report(removeAfter ? "removed" : "hidden");
        });
      }
      $("#fade").on("click", () => fade(false));
      $("#remove").on("click", () => fade(true));
      $("#restore").on("click", function () {
        if (!$("#notice").length) $("#host").html(initialHtml);
        $("#notice").stop(true, false).css("opacity", "").show();
        enable();
        report("visible");
      });
      $("#reset").on("click", function () {
        $("#notice").stop(true, false);
        $("#host").html(initialHtml);
        enable();
        report("visible");
      });
      report("visible");
    });
  </script>
</body>
</html>

Anfangs enthält die Eingabe Keep me und das Ergebnis lautet:

state=visible | nodes=1

1. Ändern Sie Note in edited und drücken Sie Fade only. Nach 800 ms erscheint state=hidden | nodes=1.
2. Restore zeigt denselben Hinweis mit erhaltenem edited. Ausblenden hat das Element bewahrt.
3. Fade then remove löscht nach dem Effekt: state=removed | nodes=0. Verzögertes Entfernen lässt den Verlauf sichtbar.
4. Nach dem Löschen erzeugt Restore einen neuen Hinweis aus Ausgangs-HTML. Die Eingabe wird Keep me; edited wird nicht automatisch gerettet.
5. Restore während des Effekts stoppt und zeigt das bestehende Element. Reset stoppt und erzeugt Anfangs-HTML neu, wodurch bearbeitete Eingaben zurückgesetzt werden.
6. 0 ms führt dieselbe Abschlusslogik ohne Übergang aus. Erkannte reduzierte Bewegung verwendet ebenfalls null.

Für die Wiederherstellung bearbeiteter Daten nach echtem Löschen müssen Sie diese separat speichern und auf neue Elemente übertragen. Restore in dieser Übung zeigt entweder das vorhandene Element oder erzeugt festen Ausgangsinhalt; es rettet keine gelöschten Eingaben.

Nach Abschluss entfernen und fehlende Ziele behandeln

.remove() löscht Element und Inhalt sowie zugehörige jQuery-Daten und Ereignisse. Das ist keine Aufbewahrung wie Ausblenden. Im Callback entfernt das Beispiel this nur bei wahrem removeAfter. this ist in der normalen Funktion das gerade abgeschlossene DOM-Element.

.fadeOut() blockiert nachfolgenden JavaScript-Code nicht. Unmittelbares .remove() nimmt das Element vor Effektende weg. Bei mehreren Treffern läuft der Callback pro Element; hier wird absichtlich nur eine eindeutige ID gewählt.

Eine leere Auswahl hat keinen Elementcallback. Das Beispiel prüft vorher .length und meldet nach vorherigem Löschen state=missing | nodes=0. Dadurch bleiben Buttons nicht beim Warten auf ein fehlendes Ziel deaktiviert.

Unterbrochenes Wiederherstellen und Wiederholung

.stop(true, false) leert wartende Effekte und stoppt den aktuellen ohne Abschluss und Callback. Deshalb kann kein alter Callback nach Restore oder Reset den Hinweis löschen. Restore bereinigt Zwischenwerte von opacity und ruft .show() auf; Reset stoppt vor dem Ersetzen des Anfangs-HTML.

Die Fade-Buttons sind währenddessen deaktiviert, Restore und Reset bleiben nutzbar. Unterscheiden Sie erfolgreichen Abschluss von Abbruch, damit Zähler und Anzeige zusammenpassen.

Prüfen Sie bei Problemen die vollständige jQuery-Datei, .fadeOut is not a function in Console und den Auswahlbereich. Sofortiges Verschwinden kann an 0 ms oder Bewegungsreduktion liegen. Bereits versteckte Elemente zeigen kein erneutes Ausblenden; stellen Sie sie vorher wieder her.