jQuery的：动画（淡入）在DIV背景颜色或图片时，将鼠标悬停链接？ [英] jQuery: Animate (fade) background-color or image in div when hover a link?
问题描述
我想创建如redhotchilipeppers.com菜单。当您将鼠标悬停在右上角的链接整个页面变化的背景颜色。原始图像仍然在后面，这只是改变了颜色。
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.
下面你可以看到我是如何试图完成它。它消失的方式太慢，当我悬停一个环节，然后又首先衰为第一环节BG颜色，然后恢复正常，然后到第二个环节背景色。在redhotchilipeppers.com的BG颜色变淡的时候了。
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.
这里的code现在我使用：
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?
推荐答案
出人意料的是，jQuery将无法运行动画背景颜色（无插件）。最简单的方法是改变类CSS和使用CSS转换代替，像这样：
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 :)
这篇关于jQuery的：动画（淡入）在DIV背景颜色或图片时，将鼠标悬停链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
