Hauptinhalt

Programmierung

Kurs: Programmierung > Lerneinheit 7

Lektion 7: DOM-Animation & Effekte mit jQuery

Wiederholung: 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?

Anmelden

Sortiere nach:

Noch keine Beiträge.

Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.