201009Mai

bgFade: jQuery-Plugin für Hover-Überblendungen

Ein sehr schöner Effekt für zeitgemäße Navigationen oder andere Schaltflächen stellen Überblendungen dar. Bei einem Crossfade werden zwei Bilder durch Verringerung der Opazität ineinander übergeblendet, wodurch ein weicher Übergang entsteht. Da Transparenz mit JavaScript und CSS kein Problem darstellt, sollte dieses Szenario eigentlich ohne Weiteres zu lösen sein. Allerdings ist es nicht ganz so einfach, denn die gewöhnliche ":hover"-Eigenschaft von CSS kann dafür nicht verwendet werden. Mit jQuery steht ebenfalls eine "hover"-Methode zur Verfügung. Das eigentliche Problem besteht darin, dass (unabhängig davon, ob ein Sprite als Hintergrundbild verwendet wird) das zweite Bildelement, in welches das Ursprungsbild übergeblendet werden soll, dynamisch erstellt und an die richtige Stelle positioniert werden muss. Wurde ein Hintergrundbild für ":hover" im Stylesheet definiert, muss dieses zuvor in jQuery entfernt werden. Anschließend kann ein Platzhalter-Element (z.B. div oder span) mit dem entsprechenden Hintergrundbild erstellt und bei dem "hover"-Event eingeblendet werden.

bgFade - jQuery-Plugin

Eine einfache Lösung für genau diese Problematik stellt Jake Lauer mit seinem jQuery-Plugin bgFade bereit. Das rund 8 KB (unkomprimiert) große Skript erledigt die Arbeit und ist sehr einfach zu konfigurieren.

  • $(".myButton").hover(function(){
  • $(this).bgFade("fadeIn");
  • }, function() {
  • $(this).bgFade("fadeOut");
  • });

Als Zielelement kann ein beliebiges Element gewählt werden. Lediglich in den CSS-Deklarationen muss noch eine Klasse für das Element definiert werden, das als Platzhalter-Element für den Überblendungs-Effekt dient. Weitere Informationen finden sich auf der Website des Plugins.

RSS-Feed abonnieren Bookmark bei Del.icio.us Bookmark bei Mister Wong