如何使用jQuery来实现li a:hover的CSS背景颜色淡入/淡出效果？

Question

我已经努力解决这个问题几天了，但一直没有成功，所以我决定在这里注册并看看是否有好心人可以帮助我。祈祷好运！

我正在尝试动画化（淡入/淡出）无序列表中链接的CSS背景颜色，当鼠标悬停时。维护无序列表结构是必要的，因此我不寻求将每个链接分离到自己的div中，并动画显示其背景颜色的解决方案。

我还希望将解决方案限制为动画化css，而不是整个解决方案都在js中，以便在关闭js时可以简单和优雅地降级。

我有一个简单的无序导航列表，就像这样：

<div id="projectContent">
    <ul class="listings">
        <li><a href="*">Another Project</a></li>
        <li><a href="*">Year</a></li>
        <li><a href="*">Location</a></li>
        <li><a href="*">Country</a></li>
        <li><a href="*">Area</a></li>
    </ul>
</div>

这是我的 CSS 代码：

#projectContent .listings{display:block; width:780px; border-top:1px solid #008BFD;     margin:0; padding:0; float:left}
#projectContent .listings li{list-style:none; padding:0; line-height:1.6em}
#projectContent .listings li a{display:block; width:780px; color:#969991; text-decoration:none; border-bottom:1px solid #666; float:left; padding:0 0 1px 0;background-color:#F5F5F5; }
#projectContent .listings a:hover{background-color:#008BFD; color:#fff;}

目前为止一切都很好 - 但是我已经四处搜寻教程/插件，希望能让链接在鼠标悬停时快速（例如50-100毫秒）淡入背景颜色，并在光标移出链接时缓慢（例如500-1000毫秒）淡出颜色。

我发现了许多关于在链接上淡入淡出背景图片的教程，但几乎所有的教程都需要把每个链接包装在自己的div或span中，而我不想这样做......

我找到了几个接近我要求的教程，但不幸的是它们没有提供演示，所以难以确定......我知道我需要使用主要的jQuery脚本和jQuery颜色插件或核心UI，我都尝试过但没有成功。

下面是我尝试过的一些jQuery示例：

var originalBG = $("#projectContent .listings li a").css("background-color");
var fadeColor = "#008BFD"; 

$("#projectContent .listings li a").hover(
    function () {
        $(this).animate( { backgroundColor:fadeColor}, 450 )
    },
    function () {
        $(this).animate( {backgroundColor: originalBG}, 950 )
    }
);

这段需要翻译的内容非常类似，但我尝试在CSS中指定悬停/淡出颜色...

var originalBG = $("#projectContent .listings li a").css("background-color");
var fadeColor = $("#projectContent .listings li a:hover").css("background-color");

$("#projectContent .listings li a").hover(
    function () {
        $(this).animate( { backgroundColor:fadeColor}, 100 )
    },
    function () {
        $(this).animate( {backgroundColor: originalBG}, 900 )
    }
);

我也尝试过这个方法，但颜色是在js中指定的，而不是在css中，这并不理想...

$('.listings li a').hover(
    function(){
         $(this).stop().animate({backgroundColor: '#f5f5f5'});
    },
    function() {
         $(this).stop().animate({backgroundColor: '#008BFD'});
    }
);

到目前为止，我尝试了很多方法都无法对我的链接产生任何影响！由于我对jQuery非常陌生，可能做错了一些简单的事情，希望在这里得到专家的帮助。

非常感谢！

- Spirit

Answer 1

为什么不直接使用CSS3过渡效果？完全不需要JS。淡入淡出效果在IE中无法实现，但这是一种更干净的实现方式。并且它会很好地降级。

a {
   background: #f5f5f5;
   -moz-transition: all 0.2s linear;
   -webkit-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

a:hover {
   background: #008BFD;
}

- Nate B

---

是的 - 你说得对，我其实已经尝试过了，并且得到了相当不错的结果 - 但是 - 我无法弄清楚如何（也不确定是否有可能）在淡入和淡出时拥有不同的速度 - 即快速淡入和缓慢淡出... - Spirit

只需在:hover上设置不同的过渡时间即可。http://jsfiddle.net/nkorth/gk5uL/ - nkorth

这非常出色，完美运作 - 非常感谢你们两位。如果不是因为IE，我会认为问题已经解决了 - 但由于这个原因，我仍然希望让js版本能够正常工作... - Spirit

Answer 2

我认为你想要的是这个？ jQuery css fade

这里有演示：Demo link

- B-Money

---

谢谢 - 差不多但还不够 - 我正在尝试在不使用背景图片的情况下实现这种效果。我本以为只需改变背景颜色的不透明度就可以实现？ - Spirit

Answer 3

来自jQuery文档：

动画属性和值

所有动画属性都应该被动画化为单个数字值，除非下面有特别说明；大多数非数字属性不能使用基本的jQuery功能进行动画化（例如，宽度、高度或左侧可以被动画化，但背景颜色不能，除非使用jQuery.Color()插件）。

- Felix Loether

---

哦，抱歉，完全忽略了那一点！不过，至少对我来说它是有效的（在添加 $("#projectContent .listings li a").animate({backgroundColor: originalBG}, 0); 行之后）：http://jsfiddle.net/BgQhm/1/ - Felix Loether

好的，这很奇怪 - 我可以在jsfiddle.net上看到您的示例正常工作 - 但是当我将其放入我的网页中时，它对我来说不起作用...请看这里：http://www.spiritlevel.co.uk/fadelinktest/linktest7.html 您能告诉我我做错了什么吗？我感觉我应该受到严厉的惩罚... - Spirit

@Spirit，你的页面无法正常工作的原因是你在页面主体加载之前运行了JavaScript。请将JavaScript代码放在头部，并用 $(function () { ... }); 包裹起来。 - Felix Loether

Felix - 非常感谢。正如我所怀疑的那样，需要一个大的Doh！头部拍打...jQuery 101-等待文档准备就绪... - Spirit

@nkorth - 谢谢你的帮助。很高兴我在这里注册了，得到了两个优秀的解决方案来解决我的问题。非常感激。 - Spirit