如何使用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 -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;
}