Deridjian
Threadersteller
Dabei seit: 28.07.2010
Ort: Berlin
Alter: 39
Geschlecht:
|
Verfasst Do 28.04.2011 17:53
Titel Img fade in CSS gestyltem Menü? (jQuery/JS) |
|
|
Hallo zusammen.
Ich habe ein menü auf einer website mit css gestaltet. Der hover-effekt ist schlichtweg über den background des listen-elements gesteuert:
#menu li a b {display:block; width:130px; line-height:36px; color:#eee; background:url(../bilder/button_mid.gif) no-repeat top; text-decoration:none; font-size:11px; font-family:Verdana, Geneva, sans-serif; font-weight:bold; text-align:left; padding:0 0 0 0; margin:0 0 0 0; cursor:pointer; text-indent:10px; text-shadow:#333 0px 1px 1px;}
#menu li a:hover b {background:url(../bilder/button_mid.gif) no-repeat bottom; color:#fff;}
(Das Background Img beinhaltet beide Zustände und wird über top/bottom entsprechend ausgerichtet. Einfach, effektiv und schnell.)
Jetzt würde ich das ganze gerne irgendwie "faden" lassen. Ich überlege ob es sinnvoller ist die bilder lieber direkt einzeln abzuspeichern und mit jQuery .animate({"opacity"... z.B. irgendwas anzustellen, oder ob es nicht irgendeine Möglichkeit gibt die bestehende Methode zu animieren (Was mir wesentlich lieber wäre)? Muss ja auch nicht zwingend jQuery sein...
Für jegliche Ideen und Denkanstöße bin ich Euch sehr dankbar.
Grüße
Marian
|
|
immerIch
Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht:
|
Verfasst Fr 29.04.2011 13:28
Titel
|
|
|
jQuery.animate funktioniert nur bei Positions- bzw. Höhen/Breitenangaben.
Für das Faden bietet jQuery .fadeTo(DAUER IN MS, OPACITY).
Da du dann sowieso mit jQuery arbeitest, entfällt hier auch :hover.
Das Ganze könnte wie folgt aussehen:
Code: |
$('element2').css('opacity','0.3');
$('element').hover(
function () {
$('element2').fadeTo(400,1)
},
function () {
$('element2').fadeTo(400,0.3)
}
);
|
gruß
|
|