Question

我正在构建一个具有悬停效果的网站。请参阅http://vitaminjdesign.com/index.html并查看右下方的服务部分。我正在使用：悬停以更改背景颜色。我想使用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;当它滚落时，回到没有。

Answer 1

您需要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])

Answer 2

注意：我通过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文件的不透明度。它完全搞砸了透明度。

将css悬停转换为jquery悬停

2 个答案: