如何使用 jQuery 淡入/淡出 li a:hover css background-color？

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 很陌生，所以可能会做一些非常简单的错误，但非常感谢这里专家的帮助。

非常感谢！

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;
}

Answer 2

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

在这里演示：Demo link

Answer 3

来自jQuery documentation：

动画属性和值

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