将csshover转换为jqueryhover

我正在建立一个hover效果的网站。 请参阅http://vitaminjdesign.com/index.html并查看右下角的服务部分。 我正在使用：hover以更改背景颜色。 我想使用jquery以优雅的淡入淡出来实现相同的效果。 这是我的HTML：

  
Website Design  

（用不同的图像和文字重复6次）

基本上，当.iconrow被翻转时，我希望背景从无变为背景颜色：#cccccc; 当它滚落时，回到没有。

Answer 1

注意：我通过Firebug构建并测试了我的解决方案，以处理您提供的链接。 如果按顺序执行这些步骤，则应使其完全正常工作

除了在Safari和Firefox 3.5以及支持RGBA背景颜色的其他浏览器之外，您将无法从transparent动画到颜色。 如果您正在寻找跨浏览器支持，那么我会像这样解决问题：

1.让您的默认hover效果由非js类限定，因此:hover效果将作为后退。 一个很好的方法如下：

   .... meta, title, link tags ...  .... other scripts ...  

这会在页面显示之前将no-js更改为js 。

2.使用jQuery在a标签旁边添加虚拟元素（在步骤3中添加虚拟元素的js ）

这是要使用的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 = $("").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文件的不透明度。 它完全搞砸了透明度。

Answer 2

你需要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的注释，如果您希望最终颜色为none，则必须在动画中添加回调函数，以便在完成动画后将颜色更改为“none”。 我猜动画“无”是未定义的。 您可以将#fff更改为接近背景的颜色，以帮助平滑最终转换。

动画签名是：

 animate(params, [duration], [easing], [callback])