200931Dez

HoverFlow: jQuery-Plugin für animierte Menüs

Animationen auf Websites stellen mit jQuery kein größeres Problem dar, denn die Bibliothek bietet einfache Befehle dafür an, mit denen sich dennoch komplexe Bewegungen und Effekte erzielen lassen. Trotzdem können bei dem Erstellen von Animationen Probleme und ungewollte Nebeneffekte auftreten, die man vermeiden möchte. Ein allgemeiner und häufig auftretender Fall dürfte die Animation von Menü-Elementen in einer Navigation darstellen: Bewegt man den Mauszeiger etwas schneller über die Menüpunkte, werden die noch laufenden Bewegungen bis zum Ende abgespielt und die folgende Animation wird angehängt. So erhöht sich die Anzahl der Bewegungsabläufe und die Elemente bewegen sich zu oft, was in der Regel nicht gewünscht ist. Verhindern lässt sich dieses Verhalten durch die "stop()"-Funktion von jQuery:

  • $(element).stop().animate(…);

Allerdings ist die daraus resultierende Animation auch nicht zufriedenstellend, da die Bewegungen nun insgesamt zu langsam ablaufen.
Zur Lösung dieses Problems hat daher Ralf Stoltze ein jQuery-Plugin entwickelt, mit dem sich ideale Animationen in Menüs erreichen lassen. Die kleine Erweiterung nennt sich hoverFlow und demonstriert auf der Website des Autors sehr gut das Problem, das beim Verwenden von ".stop().animate()" entsteht.

hoverFlow

Das Plugin lässt sich beispielsweise verwenden wie folgt:

  • $(element).hoverFlow("mouseenter", { left: 50 }, 250);

Mehr über Events findet sich in meinem jQuery-Tutorial. Das hoverFlow-Plugin kann auch für Untermenüs eingesetzt werden, wie es sehr schön auf der Seite zu sehen ist.

RSS-Feed abonnieren