我正在建立一个带有悬停效果的网站。请参阅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>
（使用不同的图像和文字重复 6 次）
基本上，当 .iconrow 翻转时，我希望背景从无变为背景颜色：#cccccc;当它滚下时，又回到无。
【问题讨论】：
标签： jquery hover jquery-animate
您需要 jquery 颜色动画插件：http://plugins.jquery.com/project/color
然后是这样的一些代码
$(".iconrow").hover(
function() {
$(this).animate( { "background-color": "#ccc" }, normal );
},
function() {
$(this).stop(true, true).animate( { "background-color": "#fff" }, normal );
}
);
编辑：
根据 dcneiner 的评论，如果您希望最终颜色为无，则必须在动画完成后向动画添加回调函数以将颜色更改为“无”。我猜动画到“无”是未定义的。您可以将 #fff 更改为接近背景的颜色，以帮助平滑最终过渡。
动画签名是：
animate(params, [duration], [easing], [callback])
【讨论】：
none 变为完全透明的颜色。这种类型的动画对他没有帮助。此外，您需要引用background-color 或使用backgroundColor。您当前的代码是无效的 JS。
注意：我通过 Firebug 构建并测试了我的解决方案，以处理您提供的链接。如果您按顺序执行这些步骤，您应该可以完全正常工作
除了 Safari 和 Firefox 3.5 以及其他支持 RGBA 背景颜色的浏览器，您将无法从 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. 淡入淡出mouseenter 和mouseleave 上的新虚拟元素
$('.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 文件的不透明度。它完全搞砸了透明度。
【讨论】：
no color 更改为颜色。这需要仅在少数浏览器中支持的颜色的 alpha 透明度。我不确定什么不起作用，因为我测试了它并相信我得到了你想要的效果。让我贴一些代码，给我 5。
scripts.js 文件正在调用 mc.init()，这会引发错误，导致页面上的代码块无法正常工作。