jQuery：悬停链接时在div中动画（淡化）背景颜色或图像？
Posted
技术标签:
【中文标题】jQuery：悬停链接时在div中动画（淡化）背景颜色或图像？【英文标题】：jQuery: Animate (fade) background-color or image in div when hover a link? 【发布时间】：2012-04-22 19:38:45 【问题描述】：我想在 redhotchilipeppers.com 上创建一个菜单。当您将链接悬停在右上角时，整个页面的背景颜色会发生变化。原始图像仍然在后面，只是颜色发生了变化。
您可以在下面看到我是如何尝试实现它的。它的褪色太慢了，当我悬停一个链接然后另一个链接时，它首先淡入第一个链接的背景颜色，然后恢复正常，然后恢复到第二个链接的背景颜色。在 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" /></a><a href="" id="linktomouseover2"><img src="images/menu_contactus.png" /></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>
我做错了什么？还是有更好的方法来解决这个问题？
【问题讨论】：
可能是重复的.. 看看这里***.com/questions/8478685/… 【参考方案1】：令人惊讶的是，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/
无论如何它更符合语义:)
【讨论】：
哇！那效果很好。感谢您的快速答复。但我注意到的一件事是褪色在 Internet Explorer 中不起作用。可能有解决办法吗？以上是关于jQuery：悬停链接时在div中动画（淡化）背景颜色或图像？的主要内容，如果未能解决你的问题，请参考以下文章