我正在构建一个带有悬停效果的网站。请查看http://vitaminjdesign.com/index.html，并查看右下角的服务部分。我使用:hover来更改背景颜色。我想使用jquery来实现优美的淡入淡出效果。以下是我的html代码：
<div class="iconrow">
<a href="#"><img src="images/icon1.png" border="0" width="35" />
<h2>Website Design</h2></a>
</div>
基本上，当鼠标滑过.iconrow时，我希望背景从无变为背景颜色：#cccccc;，当鼠标离开时，背景又变回无。
$(".iconrow").hover(
function() {
$(this).animate( { "background-color": "#ccc" }, normal );
},
function() {
$(this).stop(true, true).animate( { "background-color": "#fff" }, normal );
}
);
编辑:
根据dcneiner的评论，如果您希望最终颜色为无色，则必须添加回调函数来在动画完成后将颜色更改为“无色”。我猜测将颜色动画化为“无色”是未定义的。您可以将#fff更改为接近背景的颜色，以帮助平滑最终过渡。
animate函数的签名为：
animate(params, [duration], [easing], [callback])
注意：我通过Firebug构建和测试了我的解决方案，以使其在您提供的链接上正常工作。如果按顺序执行这些步骤，您应该可以完全运行它。
除了支持RGBA背景颜色的Safari和Firefox 3.5等其他浏览器之外，您将无法从transparent动画到颜色。如果您正在寻找跨浏览器支持，则可以像这样解决问题：
1. 将默认的悬停效果限定在非JS类中，以便:hover效果可以作为后备方案。一个很好的方法是：
<html class="no-js">
<head>
.... meta, title, link tags ...
<script type="text/javascript">document.documentElement.className = "js";</script>
.... other scripts ...
</head>
这会在页面显示之前将 no-js 更改为 js。
2. 使用 jQuery 在您的 a 标签旁添加虚拟元素（js 添加虚拟元素的步骤在第3步）
以下是要使用的 CSS：
.js .iconrow { background: none !important } /* Hide current hover effect */
.iconfader {
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color: #ccc;
z-index: 5;
}
.iconrow { position: relative } /* Spans are absolute, need the parent to be relative */
.iconrow a { position: relative; z-index: 10} /* Needs to sit on top */
3. 当鼠标移入和移出时，淡入淡出新的虚拟元素
$('.iconrow').each(function(){
var $span = $("<span class='iconfader'></span>").css('opacity',0.0).appendTo(this);
$(this).hover(function(){
$span.stop().animate({opacity: 0.8}, 200);
}, function(){
$span.stop().animate({opacity: 0.0}, 200);
});
});
最后，如果您决定使用图像背景而不是纯色，请小心。IE7和IE8无法更改24位PNG文件的不透明度。这会完全破坏透明度。