3

我正在建立一个带有悬停效果的网站。请参阅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; 当它滚下时，又回到无。

4

2 回答 2

4

您需要 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])
于 2009-12-05T04:37:18.630 回答
0

注意：我通过 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.a使用 jQuery 在标签旁边添加虚拟元素（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 文件的不透明度。它完全搞砸了透明度。

于 2009-12-05T05:48:10.493 回答