jQuery：当悬停链接时，div中的动画（淡入淡出）背景颜色或图像？

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.

我想在redhotchilipeppers.com上创建一个菜单。当您将鼠标悬停在右上角的链接时，整个页面的背景颜色会发生变化。原始图像仍然在后面，它只是变化的颜色。

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.

下面你可以看到我是如何尝试完成它的。它的衰落方式太慢了，当我悬停一个链接然后另一个链接时，它首先淡化到第一个链接bg颜色然后恢复正常然后再到第二个链接bg颜色。在redhotchilipeppers.com上，bg颜色会立即消失。

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?

我究竟做错了什么？或者这是解决这个问题的更好方法吗？

1 个解决方案

#1

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:

令人惊讶的是，jQuery不会为背景颜色设置动画（没有插件）。最简单的方法是使用CSS更改类并使用CSS转换，如下所示：

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

jsFiddle：http：//jsfiddle.net/kkzLW/

It's more semantic anyway :)

无论如何它更具语义:)

#1