jQuery: animer (fondu) une couleur d’arrière-plan ou une image dans une div lorsque vous survolez un lien?

Je veux créer un menu tel que sur redhotchilipeppers.com. Lorsque vous survolez un lien en haut à droite, la couleur d’arrière-plan de la page entière change. L’image d’origine est toujours à l’arrière, c’est juste la couleur qui change.

Ci-dessous, vous pouvez voir comment j’ai essayé de l’accomplir. Il s’estompe beaucoup trop lentement et lorsque je survole un lien, puis un autre, il passe d’abord au premier lien couleur bg, puis à la normale puis au second lien couleur bg. Sur redhotchilipeppers.com, les couleurs bg s’estompent immédiatement.

Voici le code que j’utilise actuellement:

  body { margin:0 auto; top:0; left:0; height:100%; width:100%; background:url(images/bg.jpg); } #container { width:100%; height:100%; display:block; position:absolute; top:0; left:0; opacity:0.4; filter:alpha(opacity=40); -moz-opacity: 0.4; background-color:#fff; z-index:-1; } .link { position:inherit; z-index:1; float:right; padding-top:100px; }    
jQuery('#linktomouseover').hover(function() { jQuery('#container').animate({ backgroundColor: "#2154b9"}, 500); }).mouseleave(function(){ jQuery('#container').animate({ backgroundColor: "#ffffff"}, 500); }); jQuery('#linktomouseover2').hover(function() { jQuery('#container').animate({ backgroundColor: "#ac1c27"}, 500); }).mouseleave(function(){ jQuery('#container').animate({ backgroundColor: "#ffffff"}, 500); });

Qu’est-ce que je fais mal? Ou est-ce une meilleure façon de résoudre ce problème?

Étonnamment, jQuery n’animera pas les couleurs d’arrière-plan (sans plugin). Le moyen le plus simple consiste à modifier les classes avec CSS et à utiliser des transitions CSS, comme suit:

 $('#linktomouseover').hover(function() { $('#container').addClass('hover1') }, function() { $('#container').removeClass('hover1') }); #container { transition: background-color 0.5s; -moz-transition: background-color 0.5s; -webkit-transition: background-color 0.5s; -o-transition: background-color 0.5s; } 

jsFiddle: http://jsfiddle.net/kkzLW/

C’est plus sémantique quand même 🙂