Hauptinhalt
Programmierung
Kurs: Programmierung > Lerneinheit 7
Lesson 7: DOM-Animation & Effekte mit jQueryWiederholung: Animation der DOM mit jQuery
jQuery bietet eine Reihe von Funktionen für die Animation und Effekte an. Diese sind alle in der Dokumentation aufgeführt.
Sichtbarkeit ändern
Um die Sichtbarkeit von Elementen zu ändern, kannst du
hide()
und show()
verwenden:$("#pic").hide();
$("#pic").show();
(siehe Beispiel)Du kannst auch
toggle()
verwenden, welches basierend auf dem aktuellen Zustand automatisch entscheidet, ob show oder hide aufgerufen werden muss:
$("#pic").toggle();
(siehe Beispiel)Jeder dieser Funktionen kannst du auch eine Dauer übergeben. Dann wird jQuery die Veränderung der Sichtbarkeit automatisch für diese Dauer animieren:
$("#pic").toggle(1000);
Du kannst ebenfalls
slideDown()
, slideUp()
und slideToggle()
für Verschiebe-Effekte (siehe Beispiel) oder fadeIn()
, fadeOut()
und fadeToggle()
für einen Effekt für das Ein-/Ausblenden
(siehe Beispiel) verwenden.Als zweiter Parameter kannst du all diesen Funktionen eine Callback-Funktion übergeben. jQuery wird diese dann aufrufen, sobald die Animation beendet ist:
$("#pic").toggle(1000, function() {
$("body").append("It's here!");
});
Du kannst ebenfalls mehrere Effekte miteinander verknüpfen und
delay()
aufrufen, wenn du eine Verzögerung zwischen den Effekten wünscht:$("#pic").slideUp(300).delay().fadeIn();
Benutzerdefinierte Animation
Wenn du bestimmte CSS-Eigenschaften animieren möchtest, kannst du die Funktion
animate()
verwenden: $("#pic").animate({
width: "70%",
opacity: 0{,}7,
padding: 20
}, 1000);
Beachte, du kannst nur CSS-Eigenschaften mit numerischen Werten animieren. Daher kannst du Eigenschaften wie z. B. 'color' nicht animieren. (siehe Beispiel)
Der Funktion
animate()
kannst du auch verschiedene weitere Callback-Funktionen hinzufügen. Diese werden aufgerufen, wenn z. B. die Animation fortschreitet oder abschlossen ist. Schau dir die Dokumentation für mehr Details an.Verantwortungsvoll animieren
Animationen sollten immer zur Verbesserung der Benutzerfreundlichkeit beitragen und diese nicht noch schlimmer machen! Animationen sollten den Benutzern helfen, den Zustand der Webanwendung besser zu verstehen oder einen Hauch von Spaß daran haben. Sie sollten die Bedienung nicht unnötig verlangsamen und den Benutzer frustrieren. Du kannst deine Benutzer um Feedback zu deiner Verwendung von Animationen bitten oder mit einem Designer arbeiten, um zu entscheiden, wie und wo du animieren sollst.
Wenn du weißt, dass dein Benutzer ein Gerät, auf welchen Animationen nicht gut funktionieren, benutzt, kannst du sie, indem du
$.fx.off
auf true
setzt, ganz abschalten.Willst du an der Diskussion teilnehmen?
Noch keine Beiträge.