Faden bij hover

[Verwijderd]

Dag medetweakers,

Ik heb 2 menu's in elkaar gezet waarbij één van deze menu's een background heeft meegekregen bij een hover. Via CSS3 kunnen transitions helaas niet op backgrounds worden toegepast.
Welke jQuery code heb ik nodig om mijn menu met achtergrond bij een hover in te laten faden?

Dit is mijn opmaak

code:

#leftnav a.active{
    background:url(..images/leftnavbg.png) no-repeat;
}

#leftnav a:hover{   
    background:url(../images/leftnavbg.png);    
}

De active variant heeft dus ook al een background. Het is me helaas nog niet gelukt om dit met jQuery aan de praat te krijgen.

Hopelijk kan iemand mij een oplossing bieden.
Alvast bedankt voor de inspanning!

[Keiichi]

Als je een onmouseover met een .fadeIn() van jquery combineert, moet je toch wel een eind komen?

[Verwijderd]

Ja dat dacht ik dus ook maar helaas kom ik er nog niet uit ...

[Verwijderd]

code:

    $('#testdiv').onmouseOver(function() {
      $('#testdiv').fadeIn('slow', function() {
        // Animation complete
      });

Ik weet dat 't zoiets moet zijn. Alleen moet de testdiv:hover bij een mouseover worden weergegeven.

[Zoefff]

Verwijderd schreef op dinsdag 23 oktober 2012 @ 16:13:
Via CSS3 kunnen transitions helaas niet op backgrounds worden toegepast.

Transitions die je op een achtergrond kan toepassen zijn beperkt, maar zeker niet onmogelijk. Ik heb ooit een snelle testcase in elkaar gezet om 2 achtergrondafbeeldingen in elkaar te laten crossfaden, wellicht heb je daar wat aan?

Als je het menu laat faden naar een achtergrondafbeelding die hetzelfde is maar dan bijvoorbeeld iets lichter (of het eindresultaat wat je wilt behalen) dan kan je bovenstaande truc volgens mij prima inzetten. Tevens compatible met oudere browsers die wel netjes het eindresultaat laten zien en waarbij alleen het fade-effect ontbreekt

[Ronnyrr]

Je kan ook via jQuery de CSS background-image veranderen en dat dan met CSS transitions laten faden.
Anders zou je inderdaad ook volledig jQuery daarvoor kunnen gebruiken zoiets als:

JavaScript:

$('document').ready(function () {
     $('#testdiv2').hide();

     $('#testwrap').hover(function () {
           $('#testdiv').fadeOut();
           $('#testdiv2').fadeIn();

     }, function () {
          $('#testdiv').fadeIn();
           $('#testdiv2').fadeOut();
     });
});

[Verwijderd]

Ok thanks voor de adviezen! Ik zal er nog eens mee bezig gaan

[TheNephilim]

Ondersteund jQuery wel background animations, volgens mij niet? Je kunt inderdaad oplossingen zoals de fadeIn en fadeOut gebruiken, maar dan werk je met extra div's.

http://keith-wood.name/backgroundPos.html, misschien komt deze van pas.

Maar als het twee heel verschillende achtergronden zijn, dan moet je wel iets met div's doen in de container. position: absolute; width: 100%; height: 100%; z-index: -1; Iets in die geest in ieder geval. Want je background moet anders per item, a, neem ik aan?