Übersicht


Standard Effekte

Einer der wohl am häufigsten genutzten Effekte ist das einfache Anzeigen bzw. Verbergen von Elementen. Obwohl dies leicht mit der css() Methode realisiert werden könnte, indem man dem display Attribut entweder Werte wie block oder inline zum Anzeigen oder hidden zum Verbergen zuweisen würde, gibt es auch hier wieder eigens dafür vorgesehene Methoden. Mit hide() können Elemente verborgen werden (wobei intern auch nur das display Attribut auf hidden gesetzt wird) und mit show() wieder sichtbar gemacht werden. Die Besonderheit an der show() Methode ist die, dass der ursprünglich vorhandene Attributwert wieder hergestellt wird (anstatt den Standardwert für dieses Element zu verwenden). Das ist insbesondere dann von Vorteil, wenn ein Standardwert per Style Sheet geändert wurde. Als Beispiel wäre das <li> Listenelement zu nennen. Der Standardwert für das Attribut display ist block. Angenommen der Wert wurde per Style Sheet auf inline gesetzt um ein horizontales Menü zu realisieren, so würde die Wiederherstellung des Standardwertes block das Menü zerstören. Bei Anwendung der show() Methode wird diese Problematik umgangen.
Nebenbei sei gesagt, dass dies einer der im Kapitel über die DOM-Manipulation erwähnten Bereiche ist, in denen ebenfalls toggle() Methoden vorhanden sind um zwischen Zuständen hin- und herzuschalten.

Optional kann diesen und auch allen anderen Effektmethoden eine Geschwindigkeitsangabe als Eingabeparameter mitgegeben werden. Es gibt drei vordefinierte Geschwindigkeiten (slow, normal und fast), mit denen die Geschwindigkeit der Animation gesteuert werden kann. Im Falle von show() und hide(), die ohne diesen Parameter gar nicht animiert sind, wird automatisch eine Animation hinzugefügt. Es werden gleichzeitig die Höhe und Breite des Elementes, sowie die Deckkraft (Opacity) verändert.
Die Verwendung weiterer Effektmethoden wie z.B. slideIn(), slideOut(), fadeIn() und fadeOut() geschieht analog, wobei hier nur die Veränderung der Höhe des Elementes, bzw. dessen Deckkraft animiert wird.


Benutzerdefinierte Effekte

Neben den Standard Effekten gibt es die Möglichkeit eigene Animationen zu kreieren. Hierfür wird die animate() Methode verwendet, die durch eine sehr flexible, sowie umfangreiche Parameterliste viele Möglichkeiten bietet. Neben einer Map mit Attribut:Wert Paaren für die Eigenschaften die animiert werden sollen, können weitere optionale Paramter wie z.B. Geschwindigkeit/Dauer oder eine Callback-Funktion angegeben werden. Weitere Details sind in der jQuery Dokumentation zu finden.

$("#myElem").animate({
   height: "80%",
   opacity: "0.3",
   borderWidth: "5px",
   fontSize: "3em",
}, 1500);

In dieser benutzerdefinierten Animation werden gleichzeitig die Höhe, Deckkraft, Rahmenbreite und Schriftgrösse eines Elementes verändert und die Animationsdauer auf 1500 ms gesetzt.


Sequentielle Effekte

Im Beispiel der benutzerdefinierten Animation handelte es sich um eine simultane Veränderung der verschiedenen Eigenschaften, die dadurch erreicht wurde, dass alle zu ändernden Eigenschaften in einem animate() Aufruf untergebracht wurden. Sollen die Änderungen nun sequentiell ausgeführt werden, so können die Eigenschaften in einzelne Methodenaufrufe verpackt werden, die mittels des Chaining nacheinander ausgeführt werden.

$("#myElem").animate({height: "80%"}, "slow")
   .animate({opacity: "0.3"}, "slow")
   .animate({borderWidth: "5px"}, "normal")
   .animate({fontSize: "3em"}, "fast");

Neben der animate() Methode können auch beliebig andere Effektmethoden angehängt werden.


Effekte mit mehreren Elementen

In den vorherigen Beispielen wurde bisher immer nur jeweils ein Element animiert. Es ist aber ebenfalls möglich, mehrere Elemente zu animieren. Hier ist jedoch eine andere Vorgehensweise von Nöten um Animationen simultan bzw. sequentiell ablaufen zu lassen.
Eine simultane Animation von z.B. zwei aufeinander folgenden Paragraphen, die jeweils teilweise ausgeblendet werden sollen, ist wie folgt zu erzeugen:

$("p.first").fadeTo("slow", 0.5)
   .next()
   .fadeTo("slow", 0.5);

In diesem Fall wird der erste Paragraph selektiert und teilweise ausgeblendet. Der darauffolgende Paragraph wird durch das next() selektiert und ebenso ausgeblendet. Obwohl die Methoden durch das Chaining vermeindlich nacheinander ausgeführt werden, so wird die Animation im Falle von mehreren Elementen doch simultan ausgeführt.
Um die Paragraphen nun nacheinander auszublenden, wird eine Callback Funktion zu Hilfe genommen.

$("p.first").fadeTo("slow", 0.5, function(){
   $(this).next().fadeTo("slow", 0.5);
});

Alle Effektmethoden können optional einen Parameter in Form einer Callback Funktion aufnehmen.
Zunächst wird wieder der erste Paragraph selektiert und ausgeblendet. Da die Callback Funktion erst nach Abschluss der vorhergehenden Methode ausgeführt wird, wird der zweite Paragraph nach dem ersten ausgeblendet. Somit können die Animationen sequentiell durchgeführt werden. Innerhalb der Callback Funktion referenziert das this den aktuell ersten Paragraphen und kann somit zum Selektieren des nächsten Paragraphen genutzt werden.