1

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

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

这是我现在使用的代码：

<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>

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

4

1 回答 1

3

令人惊讶的是，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/

无论如何，它更具语义:)

于 2012-04-10T13:56:57.360 回答