jQuery / .animate() — Eigene Animationseffekte erstellen
.animate() verändert CSS vom aktuellen zum Zielwert über eine Zeitspanne. .animate({ left: 100, width: 160, opacity: 0.4 }) verändert Position, Breite und Deckkraft zusammen. Dauer und Easing steuern den Verlauf; Abschluss gilt pro Element.
Eigenschaften und Zeit wählen
Das erste .animate()-Argument enthält Ziele. Numerisches left und width sind hier Pixel, opacity ist einheitenlos zwischen null und eins. Ein Objekt läuft gleichzeitig; getrennte Aufrufe landen dagegen gewöhnlich in der Effektschlange.
left braucht eine Positionierung außer static. relative verschiebt vom Ursprungsort, nicht zu Dokument-x=100. width meint Inhalt; das einfache content-box vermeidet zusätzliche Rahmen- und Paddingbedingungen.
duration ist Millisekunden, Standard 400. Easing verändert die Geschwindigkeit: swing und linear führen zu denselben Zielen. Beliebige Farb- oder transform-Zeichenfolgen werden nicht automatisch von Core interpoliert; prüfen Sie unterstützte numerische Eigenschaften.
Vollständiges Beispiel mit zwei Elementen
Als UTF-8 animate-demo.html speichern und öffnen. Internet lädt die offizielle Vollversion 4.0.0. Zeitliche Effekte brauchen effects, nicht Slim. Kein Server und keine Installation nötig. Zwischenwerte, Ziele, Stopp und Wiederholung wurden in Windows Edge mit 3.7.1 und 4.0.0 geprüft.
Beide Boxen haben dieselben Ziele. Start stellt Anfangswerte her. Reset behält Zeit/Easing und stellt Boxen und Zähler zurück. Laufende Wiedergabe verhindert Doppelstart.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animate CSS properties and observe completion</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; }
label { display: block; margin: 8px 0; }
select, button { font: inherit; margin: 4px; }
#stage { background: #eef4f4; padding: 10px; overflow-x: auto; }
.box { position: relative; left: 0; width: 80px; height: 45px; margin: 12px 0; background: teal; color: white; box-sizing: content-box; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<label>Duration <select id="duration"><option value="600">600ms</option><option value="1200">1200ms</option><option value="0">0ms</option></select></label>
<label>Easing <select id="easing"><option value="swing">swing</option><option value="linear">linear</option></select></label>
<button type="button" id="start">Start</button>
<button type="button" id="stop">Stop here</button>
<button type="button" id="reset">Reset</button>
<div id="stage"><div class="box" id="alpha">Alpha</div><div class="box" id="beta">Beta</div></div>
<pre id="result" aria-live="polite"></pre>
<script>
jQuery(function ($) {
const $boxes = $("#stage > .box");
let generation = 0, busy = false, state = "ready", completed = 0, batches = 0;
function report() {
const values = $boxes.map(function () {
const $box = $(this);
return this.id + ": left=" + Math.round(parseFloat($box.css("left"))) + "; width=" + Math.round($box.width()) + "; opacity=" + Number(parseFloat($box.css("opacity")).toFixed(2));
}).get();
$("#result").text(["state=" + state, "completed=" + completed + "; batches=" + batches, ...values].join("\n"));
}
function reset() {
generation++; $boxes.stop(true, false).css({ left: 0, width: 80, opacity: 1 });
busy = false; state = "ready"; completed = batches = 0;
$("#start").prop("disabled", false); report();
}
$("#start").on("click", function () {
if (busy) return;
reset(); busy = true; state = "running"; $(this).prop("disabled", true);
const run = generation;
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const duration = reduce ? 0 : Number($("#duration").val());
$boxes.animate({ left: 100, width: 160, opacity: 0.4 }, {
duration: duration, easing: $("#easing").val(),
complete: function () { if (run === generation) { completed++; report(); } }
});
$boxes.promise("fx").done(function () {
if (run !== generation) return;
batches++; busy = false; state = "done";
$("#start").prop("disabled", false); report();
});
report();
});
$("#stop").on("click", function () {
if (!busy) return;
generation++; $boxes.stop(true, false);
busy = false; state = "stopped"; $("#start").prop("disabled", false); report();
});
$("#reset").on("click", reset);
reset();
});
</script>
</body>
</html>Anfang: Breite 80, relatives left null, Deckkraft eins. Anzeigerundung begrenzt die Animation nicht auf Ganzzahlen.
state=ready
completed=0; batches=0
alpha: left=0; width=80; opacity=1
beta: left=0; width=80; opacity=1- 600ms und swing starten: drei Eigenschaften ändern sich gemeinsam.
- Fertig: state=done, completed=2; batches=1, beide left=100; width=160; opacity=0.4.
- Reset und nur Easing linear wählen, vergleichen und zurückstellen. Ziele bleiben gleich.
- 1200ms starten und Stop here: Zwischenwerte bleiben bei state=stopped, ohne späteres done.
- Reset und erneut starten; 0ms erreicht Ziele sofort.
- Reduzierte Bewegung führt auch bei gewählten 1200ms sofort zum Ziel.
Einzel- und Gesamtabschluss
complete läuft zweimal; this ist das jeweilige DOM-Element. Ein Rückruf bedeutet nicht Gesamtabschluss. .animate() blockiert JavaScript nicht bis zum Ende.
.promise("fx") beobachtet Effekte der Menge. Hier steigt batches einmal und Start wird frei. Zusätzliche Standardschlangenaufgaben können den Wartebereich erweitern.
Leere Warteschlangen beweisen keinen natürlichen Abschluss. .stop(true, false) kann unterwegs leeren und das fx-Promise auflösen. Stop und Reset ändern generation zuerst, damit alte Rückrufe nicht done über den Abbruch schreiben.
Wiederholungen stapeln normalerweise Effekte; hier verhindern Deaktivierung und busy das. Um vom aktuellen Ort ein neues Ziel anzusteuern, braucht die Oberfläche eine andere ausdrückliche Unterbrechungsregel.
Stopp, Rückkehr und Layout
jumpToEnd=false erhält den aktuellen Wert. Reset setzt drei Eigenschaften ausdrücklich zurück; sonst würden alte Zwischenwerte Vergleichsbedingungen verändern.
prefers-reduced-motion reduce setzt nur diesen Lauf auf Dauer null mit gleichem Ziel und Abschlussweg. Globale Einstellungen bleiben unverändert.
Position und Breite beeinflussen Umgebung und Überlagerung. Prüfen Sie schmale Ansichten, Zoom, langen Text und Scrollbereiche. Opacity null setzt weder display:none noch automatisch einen zugänglichen Versteckzustand.
Lassen Sie CSS-Transitions oder Plugins nicht dieselben Eigenschaften gleichzeitig steuern. Klären Sie Zuständigkeit für Elemente, Eigenschaften und Warteschlangen und begrenzen Sie Selektoren und Ereignisse.
