Tobias Scheible
Web-Entwickler, Ingenieur & Dozent
jQuery Logo

Datum: Sonntag, 18. September 2011

Autor: Tobias Scheible

Kommentar(e): 2 Kommentare

Kategorie: Web Development

Tags: JavaScript, jQuery, jQuery UI, Animation, Effekt, csss, gallery, html, slider

Slider Galerie mir jQuery

Neben vielen vordefinierten Effekten bietet jQuery mit der Funktion ".animate()" eine spannende Methode, um CSS-Eigenschaften zu animieren. Mit dieser Funktion können einzelne oder auch mehrere Eigenschaften nacheinander animiert werden. Damit lassen sich schicke neue Effekte generieren. Zum Test habe ich mir mal eine kleine Slider Galerie erstellt.

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.

jQuery Slider Gallery
jQuery Slider Gallery Demo

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:

  • Artikel teilen:

Über Tobias Scheible

Tobias Scheible

Tobias Scheible arbeitet als wissenschaftlicher Mitarbeiter an der Hochschule Albstadt-Sigmaringen. Dort ist er als Autor und e-Tutor im Masterstudiengang Digitale Forensik tätig und leite im Bachelorstudiengang IT Security Praktika rund um das Thema Informationssicherheit. Darüber hinaus ist er Mitinitiator des Kompetenzzentrums Cyber Security Lab, welches Forschungsprojekte auf dem Gebiet der IT-Sicherheit koordiniert. Zusätzlich hält er Vorträge und Workshops zu aktuellen Themen der IT-Sicherheit.

Alle Blog-Artikel Website Facebook Twitter Xing

Kommentare

Hugo

Mit .animate lässt sich relativ simpel einiges erledigen, ja. Aber wie bei allen Animationen und generell bewegten Elementen gilt, es in Maßen einzusetzen und vorher genau zu überlegen, ob die Animation einen Mehrwert für den Nutzer bringt – oder man überlädt die Seite schnell mit unnötigem Schnickschnack.

Adrian

Danke für das tut. So ein Demo hilft mir immer am meisten, dort kann man über den Quellcode dann easy die Arbeit zum Ergebniss sehen – ohne störenden Schnick-Schnak.

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

nach oben