jQuery / Method / .fadeIn() - Elemente allmählich einblenden

jQuerys .fadeIn() zeigt versteckte Elemente an und erhöht dabei allmählich ihre Deckkraft. Bei .fadeIn(800) steht 800 für die Effektdauer in Millisekunden, nicht für eine Wartezeit davor. Vom Abschluss abhängige Arbeit gehört in den Callback statt direkt hinter den Aufruf.

Dauer, easing und Abschluss verstehen

Die Dokumentation zu .fadeIn() enthält die Form .fadeIn(duration, easing, complete) mit optionalen Argumenten. Größere Zahlen bedeuten langsamere Effekte. complete ist die Funktion nach dem Effektabschluss eines Elements.

easing steuert den Verlauf: Standard ist swing, linear verläuft gleichmäßig. Geben Sie linear hinter der Dauer an, etwa .fadeIn(800, "linear"), nicht allein an der Dauerposition. Das vollständige Beispiel nutzt den Standard.

Vollständiges Beispiel für zwei Hinweise

Speichern Sie alles als UTF-8 in fadein-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). Die Slim-Version schließt Effekte aus und besitzt kein .fadeIn(); verwenden Sie die vollständige Datei.

Der Code verwendet 4.0.0. Zwischenwerte der Deckkraft, 800/200 ms, Abschluss pro Element, unterbrochener Reset und sofortige Anzeige wurden mit 3.7.1 und 4.0.0 ausgeführt. Bei angeforderter Bewegungsreduktion wird der allmähliche Effekt ausgelassen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fade in two notice panels</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    .panel { display: none; padding: 16px; margin: 12px 0; background: #e4f3f1; }
    button, select { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Fade in two notice panels</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"> Show instantly</label>
  <button type="button" id="show">Show notices</button>
  <button type="button" id="reset">Reset</button>
  <div id="notices">
    <div class="panel" id="one">Notice one</div>
    <div class="panel" id="two">Notice two</div>
  </div>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const $panels = $("#notices > .panel");
      let completed = 0;
      function report(state) {
        $("#result").text(`state=${state} | completed=${completed}`);
      }
      function clearPanels() {
        $panels.stop(true, false).hide().css("opacity", "");
        completed = 0;
      }
      $("#show").on("click", function () {
        clearPanels();
        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        const duration = $("#instant").prop("checked") || reduce
          ? 0 : Number($("#duration").val());
        $("#show").prop("disabled", true);
        report("showing");
        $panels.fadeIn(duration, function () {
          completed++;
          if (completed === $panels.length) {
            report("visible");
            $("#show").prop("disabled", false);
          } else {
            report("showing");
          }
        });
      });
      $("#reset").on("click", function () {
        clearPanels();
        $("#show").prop("disabled", false);
        report("hidden");
      });
      report("hidden");
    });
  </script>
</body>
</html>

Beide Felder beginnen mit display: none. Das Ergebnis lautet:

state=hidden | completed=0

1. Lassen Sie Show instantly aus, wählen Sie 800 ms und drücken Sie Show notices. Beide Felder erscheinen zusammen; währenddessen ist der Anzeigebutton deaktiviert.
2. Nach Abschluss sind beide sichtbar: state=visible | completed=2. Zwei zählt abgeschlossene Elemente, keine Klicks.
3. Nach Reset erreichen Sie mit 200 ms dasselbe Ergebnis schneller. Das bloße Ändern der Auswahl verändert keinen laufenden Effekt.
4. Reset während eines 800-ms-Laufs versteckt beide sofort und stellt state=hidden | completed=0 her. Auch nach der ursprünglichen Dauer erscheint kein alter Abschluss.
5. Show instantly verwendet Dauer null und zeigt beide sofort. Die erkannte Betriebssystemeinstellung für reduzierte Bewegung bewirkt dasselbe.

Prüfen Sie bei fehlendem Übergang zuerst die Sofortanzeige und prefers-reduced-motion. Dieses Beispiel priorisiert Bewegungsreduktion; daher kann selbst 800 zur sofortigen Anzeige führen.

Abschluss wird pro Element aufgerufen

.fadeIn() blockiert folgenden JavaScript-Code nicht bis zum Ende. Eine Abschlussmeldung direkt danach kann während des laufenden Effekts erscheinen. Das Beispiel erhöht completed im Callback und zählt tatsächliche Abschlüsse.

Jedes der beiden Felder ruft den Callback einmal auf. Es handelt sich nicht um einen einzigen Aufruf für die gesamte Auswahl. Erst bei completed gleich $panels.length werden visible gemeldet und der Button aktiviert. Die Menge bleibt in dieser Übung unverändert. In einer normalen Callback-Funktion ist this das gerade abgeschlossene DOM-Element.

Unterbrechen, zurücksetzen und Fehler suchen

Bei .stop(true, false) leert true die verbleibende Effektwarteschlange; false stoppt den aktuellen Effekt ohne Abschluss. Sein Abschlusscallback läuft nicht, sodass nach Reset nichts Altes eingreift. .hide() versteckt anschließend die Felder, entfernt einen verbliebenen Inlinewert für opacity und setzt den Zähler zurück.

Ein Neustart bereinigt ebenso und beginnt versteckt. Der deaktivierte Button verhindert angesammelte Klicks und Effekte. Die Bereinigung betrifft nur diese Felder und Zähler; globale Effekteinstellungen bleiben unberührt.

Prüfen Sie bei Problemen die vollständige jQuery-Datei in Network und Fehler wie .fadeIn is not a function in Console. Eine leere Auswahl führt zu keinem Elementcallback. Prüfen Sie auch visibility: hidden, versteckte Vorfahren und stärkere display-Regeln: Deckkraftänderung beseitigt nicht jede Versteckbedingung.