// Los geht's $(document).ready(function() { init_dropdown(); }); Diskussion In diesem Beispiel ist jQuery nur im Einsatz, wenn es sich beim Browser um den IE 6 handelt.Sie fragen sich vielleicht: »Warum wird fadeIn mit einer Animation aufgerufen, die nur eine Millisekunde dauert?« Damit wird ein Fehler im IE 6 behoben, der Probleme mit dem Rendern vertikaler CSS-Rahmen hat. Visuell ist es das gleiche wie .show() , aber ohne Probleme mit den Rahmen. Abgesehen davon ist alles ziemlich einfach. Wenn man über ein Listen-Element mit class="dropdown_trigger" mit dem Mauscursor fährt, wird das folgende
angezeigt. Verlässt die Maus den Bereich, wird das
verborgen. Das ist alles! Beachten Sie, dass wir die jQuery-Bibliothek nur beim IE 6 einbinden. Wenn Sie dieses Buch lesen, kann es gut sein, dass Sie jQuery für mehr als nur für dieses Beispiel nutzen möchten. Dann sollten Sie jQuery natürlich außerhalb des bedingten Kommentars einbinden
Bilder zyklisch einblenden Problem Auf Seiten mit einem großen »Titelbild« – oft bei E-Commerce-Sites – wetteifern viele Produkte und/oder Abteilungen um diesen Bereich. Als Kompromiss wird dabei meist eine ganze Serie von Bildern zyklisch ein- und ausgeblendet. Das ist keine schlechte Idee, allerdings ist die Umsetzung häufig frustrierend, da viel zu viele Sites nicht die Möglichkeit bieten, die »Bilderschau« zu stoppen, um die Informationen auf einem der Bilder genauer in Augenschein zu nehmen. Man sollte sich Gedanken darüber machen, was eine fortlaufende Animation für Folgen hat. Die meisten Anwender haben gelernt, nervige Werbungen zu ignorieren, die viel Bewegung enthalten. Die Designer und Entwickler müssen auch Anwender berücksichtigen, die kein Interesse an der Animation haben, den Rest der Seite aber durchaus lesen wollen. Schlimmert noch ist eine Situation, in der ein Anwender eines der Bilder tatsächlich anschauen möchte, dieses sich aber nicht stoppen lässt. Daher finden Sie in diesem Rezept eine Play/Pause-Funktionalität, damit die Benutzer nicht in einer endlosen animierten Schleife gefangen sind. Lösung Mit den jQuery-Methoden .fadeIn() und .fadeOut() könnenwir eine hübsche, zyklisch rotierende Animation erstellen, die über ein Array iteriert und die Opazität jedes Bildes abhängig von einem Timer verändert. Greifen wir auf das Wissen zurück, das wir uns beim Implementieren der Registerkarten-Lösung angeeignet haben, dann können wir Links auf jedes Bild erzeugen, durch die nicht nur das Ziel-Bild in den Vordergrund geholt, sondern auch noch eine Boolesche Variable pause gesetzt wird, um die Animation anzuhalten oder weiterlaufen zu lassen. Dies führt zu einem wirklich praktischen Bild-Rotierer, anstatt nur einen visuellen Genuss zu haben. Rotator – HTML-Code