jQuery / Elemente nacheinander einblenden
.delay(index * gap).fadeIn(duration) versetzt Startzeiten. Dauert der Effekt länger als der Abstand, überlappen Animationen. Für einen Start erst nach vollständigem Abschluss rufen Sie das nächste Element im Abschlussrückruf auf.
Startabstand und Abschlussfolge
.delay() wartet in der Warteschlange jedes Elements, nicht in einer gemeinsamen Liste der Auswahl. Gleiche Verzögerung startet ähnlich gleichzeitig; index erzeugt den Versatz. JavaScript insgesamt wird nicht blockiert.
Abstand 200ms und .fadeIn() 400ms lassen Beta vor Alpha-Abschluss beginnen. Seriell folgt nach Abschluss zusätzlich 200ms Pause. Das sind Planungswerte, keine exakten Browserzeitgarantien.
.each() folgt der Auswahlreihenfolge, hier Alpha, Beta, Gamma als direkte .item. Eigene Sortierung und CSS-Reihenfolge können abweichen; berücksichtigen Sie die Lesereihenfolge.
Vollständiges Vergleichsbeispiel
Als UTF-8 appearance-demo.html speichern und öffnen. Internet lädt die offizielle Vollversion 4.0.0. Zeitgesteuerte Effekte brauchen effects, nicht Slim. Server und Installation sind unnötig. Reihenfolge, Reset und Wiederholung wurden in Windows Edge mit 3.7.1 und 4.0.0 geprüft.
HTML beginnt sichtbar und wird erst durch das bereite Script versteckt. Ein Ladefehler lässt Inhalte nicht dauerhaft per CSS verschwinden. Die Ausgabe gilt nach Initialisierung.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Staggered versus strictly sequential appearance</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: 20px; }
button, select { font: inherit; margin: 4px; }
.item { border: 2px solid teal; padding: 12px; margin: 12px 0; background: #e7f5f1; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<label>Mode <select id="mode"><option value="stagger">Staggered starts</option><option value="serial">Wait for completion</option></select></label>
<button type="button" id="start">Start</button>
<button type="button" id="reset">Reset</button>
<div id="items"><div class="item" id="alpha">Alpha</div><div class="item" id="beta">Beta</div><div class="item" id="gamma">Gamma</div></div>
<pre id="result" aria-live="polite"></pre>
<pre id="events"></pre>
<script>
jQuery(function ($) {
const $items = $("#items > .item"), gap = 200, duration = 400;
let generation = 0, busy = false, state = "ready", completed = [], events = [];
function report() {
$("#result").text(`mode=${$("#mode").val()}\nstate=${state}\nvisible=${$items.filter(":visible").length}/${$items.length}\ncompleted=${completed.join(",") || "(none)"}`);
$("#events").text(events.join("\n") || "(none)");
}
function reset() {
generation++; // Invalidate callbacks before settling old effects.
$items.stop(true, true).hide();
busy = false; state = "ready"; completed = []; events = [];
$("#start").prop("disabled", false); report();
}
function start() {
if (busy) return;
reset(); busy = true; state = "running"; $("#start").prop("disabled", true);
const run = generation, mode = $("#mode").val();
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduce) {
$items.show(); completed = $items.map(function () { return this.id; }).get();
events = ["Reduced motion: shown immediately"];
busy = false; state = "done"; $("#start").prop("disabled", false); report(); return;
}
function reveal(index, wait) {
const $item = $items.eq(index), id = $item[0].id;
$item.delay(wait).queue(function (next) {
if (run !== generation) return;
events.push("start " + id); next(); report();
}).fadeIn(duration, function () {
if (run !== generation) return;
completed.push(id); events.push("done " + id);
if (completed.length === $items.length) {
busy = false; state = "done"; $("#start").prop("disabled", false);
} else if (mode === "serial") reveal(index + 1, gap);
report();
});
}
if (!$items.length) { busy = false; state = "done"; $("#start").prop("disabled", false); report(); return; }
if (mode === "stagger") $items.each(function (index) { reveal(index, index * gap); });
else reveal(0, 0);
report();
}
$("#start").on("click", start);
$("#reset").on("click", reset);
$("#mode").on("change", reset);
reset();
});
</script>
</body>
</html>Anfangs sichtbar null, abgeschlossen nichts.
mode=stagger
state=ready
visible=0/3
completed=(none)- Start bei Staggered starts: start beta kann vor done alpha erscheinen.
- Am Ende state=done, visible=3/3 und completed=alpha,beta,gamma; Start ist wieder verfügbar.
- Wait for completion setzt zurück. Danach start alpha → done alpha → start beta → done beta → start gamma → done gamma.
- Reset mittendrin stellt verborgen wieder her. Alte Effekte dürfen später nicht zurückkehren. Erneut starten.
- Reduzierte Bewegung im System oder den Tools aktivieren: sofortige Anzeige mit Reduced motion: shown immediately.
Mehrfachklicks und Reset
Start wird deaktiviert und die Funktion prüft busy zusätzlich. Auch programmgesteuerte Wiederholung stapelt nichts. Abschlüsse werden je Element gesammelt, nicht als Gesamtabschluss eines einzigen Rückrufs behandelt.
.stop(true, true) leert wartende Effekte und beendet den aktuellen am Endzustand. Reset erhöht zuerst generation gegen alte Rückrufe, dann beendet und versteckt es. jumpToEnd kann Abschluss auslösen; deshalb nicht vor der Ungültigmachung aufrufen.
So mischen sich alte Zustände und Warteschlangen nicht in Wiederholungen. clearQueue allein stoppt keinen laufenden Effekt. Eigene setTimeout-Timer brauchten eigene Stornierung; hier gilt die fx-Verzögerung.
.queue() protokolliert den Start und ruft next() vor fadeIn. Ohne next() bleibt die Liste stehen. Seriell wird der nächste Index erst im Abschluss gestartet.
Präferenzen und Layout
Bei prefers-reduced-motion reduce entfallen Pause und Fade; der Endzustand erscheint sofort. Das betrifft nur dieses Beispiel, keine globalen Effekte. Dekoration sollte wichtige Information nicht verzögern.
Anzeige aus display:none beansprucht Raum und bewegt nachfolgenden Inhalt. Reservieren Sie Platz oder wählen Sie andere Verfahren für stabile Positionen. Versteckte Eingaben brauchen Tastatur- und Fokusplanung.
Bei dynamischen Ergänzungen Auswahl und Abschlusszahl neu bestimmen. $items hält nur die ersten drei. Entscheiden Sie zwischen vollständiger Wiederholung und neuen Elementen und stimmen Sie Reset und Warteschlangen darauf ab.
