Tobias Scheible Cyber Security & IT-Forensik Dozent
jQuery Logo

Slider Galerie mit 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.

Sonntag, 18. September 2011
2 Kommentare

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:

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog und in meinem Fachbuch. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.

Kommentare

Hugo am 20. September 2011 um 10:09 Uhr

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 am 29. September 2011 um 11:47 Uhr

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 und Hiweise

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, eine Gefährdung anderer Besucher darstellen oder keinen sinvollen Inhalt beinhalten, 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 damit ich direkt Kontakt aufnehmen kann. 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>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzhinweis des Blogs.