background fade bei hover

[vmd]

Guten Tag,

habe eine Frage und zwar habe ich ein Menüpunkt:

<a href="artwork.html" class="main_menu"> ARTWORK</a>

mit dieser Klasse:

.main_menu{
top:50%;
height:90px;
width:78px;
background: url(img/ui/main_btn.png);
position:fixed;
z-index:9999;
color: #999;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:12px;
text-align:center;
text-decoration:none;
padding-top:33px;
margin-top:-86px;
left:10px;
opacity:0;


}

und möchste via jquery einen fade Effekt mit einem anderen background image erreichen also zb in einer neuen klasse...

ich glaube das ist ganz simpel, nur komm ich nicht drauf...

 

[Duddle]

AW: background fade bei hover

Willst du einen echten Crossfade, also das eine Bild aus- und gleichzeitig das andere einblenden? Oder reicht dir, das eine Bild aus- und danach das andere einzublenden?

Für letzteres funktioniert sowas:

$(".main_menu").fadeTo('slow', 0.3, function() {
  $(this).css('background-image', 'url(neuesBild.jpg)');
}).fadeTo('slow', 1);

Für einen echten Crossfade musst du anders rangehen, so wie hier beschrieben.


Duddle