background-image mit Javascript einblenden

[handprintdesign]

Folgende Situation:
Ich habe eine horizontale Navigation mit mehreren Link-Elementen. Bitte keine Kommentare zu überflüssigen Tags, mir ist bewusst das Joomla nicht den schönsten Quelltext erzeugt :hmpf:. Mal sehen, was ich da noch mit Overwrites ausbügeln kann...

<ul class="menu">
  <li class="parent active item1"><a href="#"><span>Startseite</span></a></li>
  <li id="current" class="item3"><a href="#"><span>Über Uns</span></a></li>
  <li class="parent item4"><a href="#"><span>Organisation</span></a></li>
  <li class="parent item5"><a href="#"><span>Fachbereiche</span></a></li>
  <li class="parent item6"><a href="#"><span>Aktivitäten</span></a></li>
</ul>

Mittels CSS bekommt jeder der Links ein entsprechendes Hintergrundbild wenn er als active augezeichnet ist oder mit der Maus überfahren wird.

#header ul.menu li.item1 a:hover, #header ul.menu li.item1.active a {
  background: url(../images/item1_bg.png);
}
#header ul.menu li.item3 a:hover, #header ul.menu li.item3.active a {
  background: url(../images/item3_bg.png);
}
usw.

Um das grafisch etwas aufzupeppen, möchte ich nun das Hintergrundbild nicht einfach beim Überfahren mit der Maus anzeigen sondern mehr oder weniger langsam einblenden und ebenso beim mouseout wieder ausblenden. Browser mit deaktiviertem JavaScript zeigen das Hintergrundbild weiterhin einfach durch die CSS-Pseudoklasse :hover an.

Zusätzlich, wenn möglich: Wird z.B. item3 mit der Maus überfahren, wird nicht nur das background-image langsam eingeblendet sondern auch das background-image vom aktiven Element (also in diesem Fall parent active item1) ausgeblendet.

Ich wär für einen praktikablen Lösungsansatz sehr dankbar, da sich meine JavaScript-Kenntnisse in Grenzen halten.

 

[Pixelverwender]

AW: background-image mit Javascript einblenden

Da soll es ein jQuery PlugIn geben: "Color Animations". Vielleicht hilft Dir das weiter.

jQuery-Plugin Color Animations - Menüs mit wechselnden Farben animieren | Animationen, Effekte, Farben, Hover, jQuery | Dr. Web Magazin

Da wird es nur mit wechselnden Farben beschrieben, aber vielleicht geht es ja mit Bildern ähnlich gut.

 

[Duddle]

AW: background-image mit Javascript einblenden

Screencast zu genau dem Thema: Image Fade Revisited | jQuery for Designers - Tutorials and screencasts


Duddle