Der Aufbau der jQuery Funktion „.animate()“ lautet:

.animate( properties, [duration,] [easing,] [complete] )

Grundsätzlich lassen sich alle CSS-Eigenschaften animieren, die einen nummerischen Wert als Parameter erwarten. So kann der Abstand nach oben „top“ animiert werden, aber nicht die Hintergrundfarbe eines Elementes. Für die Animation von Farben wird aber von jQuery UI die Funktion „.animate()“ um diese Möglichkeit erweitert.

Und so sieht nun ein Aufruf der Funktion aus:

$("#dummy").animate({"marginLeft": 200}, 400);

Hierbei wird der Außenabstand nach links (marginLeft) des Elements mit der ID „dummy“ auf 200 Pixel geändert. Damit schiebt sich das Element innerhalb 400 Millisekunden nach rechts.

Natürlich ist es auch möglich, mehrere Eigenschaften gleichzeitig zu animieren:

$("#dummy").animate({
  "marginLeft": 200,
  "marginTop": 100
  },
  400
);

Eine praktische Möglichkeit ist auch die Funktionalität, einen entsprechenden Wert dazuzurechnen und nicht einen festen Wert zu übergeben:

$("#dummy").animate({"marginLeft": "+=100"}, 400);

Mit dem Parameter Easing kann bestimmt werden, wie der Animations-Effekt ausgeführt wird:

$("#dummy").animate({"marginLeft": "+=100"}, 400, "swing");

Dabei stehen die Parameter “linear” und “swing” zur Verfügung. Der Effekt  „linear“ führt die Animation gleichmäßig und der Effekt „swing“ führt den Start und das Ende etwas schneller aus. Weitere Effekte sind in jQuery nicht implementiert, aber in jQuery UI stehen weitere zur Verfügung.

Nun habe ich mir diese Funktion zu Hilfe genommen und eine kleine Slider Galerie damit entwickelt. Die einzelnen Container, die bewegt werden, liegen vollflächig im Hintergrund. Rechts und links am Rand erscheint ein Rechteck, um vorwärts beziehungsweise rückwärts zu blättern. Am Anfang wird nur das erste Element angezeigt und die anderen nach rechts außerhalb des sichtbaren Bereichs mit Hilfe von „margin-left“ geschoben. Nach einem Klick auf das Rechteck für Weiterblättern wird der linke Außenabstand des ersten Elementes auf den negativen Wert des sichtbaren Bereichs animiert und so nach links geschoben. Der linke Außenabstand des zweiten Elements wird gleichzeitig auf null animiert und somit wird das zweite Element sichtbar.

Anhand dieses einfachen Beispiels sieht man, welche Möglichkeiten in jQuery „.animate()“ stecken. Die Demo könnt ihr hier ausprobieren und hier ist der Code der Slider Galerie: