jQuery: Animate (fade) background-color or image i

I want to create a menu such as on redhotchilipeppers.com. When you hover a link in the top right the background color of the whole page change. The original image is still in the back, it's just the color that changes.

Below you can see how I tried to accomplish it. It's fades way too slow and when I hover one link and then another it first fades to the first links bg color and then back to normal and then to the second links bg color. On redhotchilipeppers.com the bg colors fades right away.

Here's the code I use right now:

<head>
<style>
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;
}
</style>
</head>

<body>
<div id="container"></div>
<div class="link">
<a href="" id="linktomouseover"><img src="images/menu_start.png" alt="" /></a><a href="" id="linktomouseover2"><img src="images/menu_contactus.png" alt="" /></a>
</div>

<script> 
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); 
});
</script>
</body>

What am I doing wrong? Or is it a better way to solve this?

Surprisingly, jQuery won't animate background colors (without a plugin). The easiest way is to change classes with CSS and use CSS transitions instead, like so:

$('#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/

It's more semantic anyway :)