Image result for jqueryBei der jQuery Bibliothek handelt es sich um ein JavaScript Framework, welches den Anwendern eine Reihe von Funktionen zur Animation zur Verfügung stellt. Hiermit lassen sich CSS-Eigenschaften durch verschiedene Effekte und Bewegungen animieren und somit aufwerten. Dies gestaltet sich dabei mit jQuery ausgesprochen einfach, weshalb sich die Bibliothek vor allem auch für Anfänger im Bereich der Webentwicklung besonders eignet. Jedoch sollten Anwender auch darauf achten, nicht zu viele Animationen auf einer Seite zu erstellen, da diese schließlich auch flüssig ablaufen sollen.

Wir möchten im Folgenden einmal ein wenig auf die Grundlagen von jQuery Animationen eingehen.

Grundlagen der Animation mit jQuery

Eine Animation, die mit jQuery erstellt wird, basiert immer auf der Annäherung an den Wert einer CSS-Eigenschaft, welcher innerhalb einer zuvor festgelegten Zeitspanne erreicht wird. Die Geschwindigkeit hängt dabei von der Anzahl der Zwischenbilder ab, die von jQuery erstellt werden. Bereits 16 – 18 Bilder pro Sekunde erscheinen für das menschliche Auge flüssig, was auch das hierzulande verwendete PAL-System verwendet. Andere Systeme verwenden für Bewegungen auf dem Bildschirm 25 Bildern pro Sekunde, welche dann vollkommen flüssig ablaufen. Mit jQuery erstellte Animationen laufen gar etwas schneller ab, da das Intervall für die Wiederholrate von Bildern hier mit 13 ms vorgegeben ist und von jQuery 60 – 65 Bilder die Sekunde generiert werden.

Zur Erstellung von Bewegungen benötigt es in jQuery stets zwei Werte, zum einen die Dauer einer Animation, welche in Millisekunden angegeben wird, sowie die CSS-Eigenschaft, die in der Folge animiert werden soll. Neben der Dauer und der Eigenschaft kann zudem noch eine weitere Eigenschaft verändert werden, der Übergang (auch Tween genannt). Dieser beschreibt eine Kurve, welche das Verhältnis zwischen einem Wert und einer Zeitspanne definiert. Durch eine Veränderung dieser Kurve können Animationen beispielsweise beschleunigt oder verlangsamt werden.

Zudem können Elemente mithilfe von jQuery nicht nur bewegt werden, sondern lassen sich beispielsweise auch Ein- oder Ausblenden.