jQuery / Method / .fadeToggle() - Sichtbarkeit jedes Elements umkehren

jQuerys .fadeToggle() blendet sichtbare Elemente aus und versteckte ein. Bei mehreren Elementen wird jeder eigene Zustand umgekehrt; die gesamte Auswahl wird nicht einheitlich sichtbar oder versteckt. Für sicheres Anzeigen nutzen Sie .fadeIn(), für sicheres Verstecken .fadeOut().

Umkehr pro Element und Argumente

Die Dokumentation zu .fadeToggle() nennt .fadeToggle(duration, easing, complete) mit optionalen Argumenten. duration ist die Laufzeit: Standard 400 ms, "fast" 200 und "slow" 600. Größere Zahlen bedeuten langsamere Übergänge, keine Wartezeit davor.

Standard-easing ist swing. Für gleichmäßigen Verlauf folgt linear hinter der Dauer, etwa .fadeToggle(800, "linear"), nicht allein an der Dauerposition. complete läuft nach dem Ende des jeweiligen Elements in beiden Richtungen.

Anders als .fadeIn() und .fadeOut() führen zwei abgeschlossene Umkehrungen zum Ausgangszustand zurück. Verstecken endet mit display: none ohne Layoutplatz, löscht das DOM-Element aber nicht.

Vollständiges Beispiel mit gegensätzlichen Anfangszuständen

Speichern Sie alles als UTF-8 in fadetoggle-demo.html und öffnen Sie es im Browser. Keine Installation ist nötig, aber Internet zum Laden der offiziellen vollständigen jQuery-Datei über das Content Delivery Network (CDN). Slim enthält keine Effekte und ist ungeeignet.

Der Code verwendet 4.0.0. Umkehr, linearer Verlauf, Abschlusszählung, wiederholte Eingaben und Neustart nach Reset wurden mit 3.7.1 und 4.0.0 geprüft. one beginnt sichtbar, CSS versteckt two. Die Bedienelemente bleiben außerhalb.

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

Anfangs ist nur one sichtbar:

visible=one | completed=0

1. Lassen Sie Toggle instantly aus, wählen Sie 800 ms und drücken Sie Toggle both. one blendet aus, two ein; währenddessen erscheint animating.
2. Nach beiden Abschlüssen lautet das Ergebnis visible=two | completed=2. completed zählt Elemente, keine Klicks.
3. Eine weitere abgeschlossene Umkehr ergibt visible=one | completed=2. Jede angenommene Aktivierung startet den Zähler bei null.
4. Mit 200 ms erfolgt dieselbe Umkehr schneller. Zusätzliche Klicks währenddessen ignoriert die busy-Prüfung dieses Beispiels.
5. Reset während der Ausführung stellt one sichtbar, two versteckt und completed=0 her. Prüfen Sie auch, dass die nächste Aktivierung two zeigt.
6. Toggle instantly oder reduzierte Bewegung verwendet Dauer null. Der native Button lässt sich nach Fokussierung per Enter aktivieren.

Abschlüsse und wiederholte Eingaben

.fadeToggle() blockiert folgenden JavaScript-Code nicht bis zum Ende. Der Callback läuft einmal pro Element; das Beispiel zeigt sichtbare IDs erst bei completed gleich $tiles.length. Auch erfolgreiches Ausblenden zählt als Abschluss.

busy ist eine selbst erstellte Zustandsvariable, kein jQuery-Argument. Sie wird beim Start wahr und nach beiden Abschlüssen falsch. Dieses Design ignoriert weitere Eingaben, statt mitten im Effekt sofort umzudrehen. Das unterscheidet sich vom Ansammeln aller Wünsche in einer Warteschlange.

Soll ein Öffnen-Button immer öffnen, wählen Sie ausdrücklich die Anzeigerichtung. Auch unterschiedliche Anfangszustände gleichen Sie mit .fadeIn() oder .fadeOut() an, statt sie umzudrehen.

Reset-Reihenfolge und Fehlerprüfung

Bei Resets .stop(true, true) leert das erste true die Warteschlange; das zweite beendet den aktuellen Effekt sofort. Dabei können Abschlusscallbacks laufen. Erst danach versteckt das Beispiel beide, zeigt one, setzt busy und completed zurück und meldet den Endzustand. So überschreibt kein alter Abschluss die wiederhergestellten Werte.

Toggle-Effekte verfolgen laufende Zustände. Ein Abbruch auf halbem Weg mit anschließender CSS-Korrektur reicht ohne Prüfung des nächsten Durchlaufs nicht aus. Das Beispiel beendet den aktuellen Effekt, stellt bekannte Sichtbarkeit her und prüft Reset sowie folgende Umkehr.

Bei umgekehrten Erwartungen kontrollieren Sie Anfangs-CSS und aktuelles display. Fehlende Bewegung kann durch Sofortmodus oder Bewegungsreduktion entstehen; Methodenfehler verlangen einen Blick auf vollständiges jQuery und Console. Eine leere Menge hat keinen Elementcallback, weshalb vor dem Start .length geprüft wird.