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-1000ms）当光标离开链接时。

我发现许多教程在链接上淡出背景图像，但几乎所有教程都涉及每个链接都在其自己的div或span中，我不想这样做...

我发现了一些我认为接近我正在寻找的教程但不幸的是他们没有提供演示这么难以确定...我明白我需要同时使用主要的jQuery脚本和无论是jQuery颜色插件还是核心用户界面 - 我都试过了两次都没有成功。

以下是我尝试过的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()插件）。

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

3 个答案:

动画属性和值