如何使用jQuery淡入/淡出li a:hover css background-color? [英] How to use jQuery to fade in/out li a:hover css background-color?

问题描述

我一直在困扰一个问题，但是没有成功，所以决定在这里签约，看看是否有一种友善的灵魂可以帮助我.手指交叉了！

I have been struggling with a problem for a couple of days now with no success so decided to sign up here and see if some kind soul can help me out. Fingers crossed!

当鼠标悬停在无序列表中时，我试图设置动画(淡入/淡出)链接的css背景色.维持无序列表结构非常重要，因此我不希望找到一种将每个链接分成其自己的div并为其设置背景颜色的动画的解决方案.

I am trying to animate (fade in/out) the css background-color of a link in an unordered list when it is hovered over. It is essential to maintain the unordered list structure so I am not looking for a solution that separates each link into it's own div and animates the background colour of that.

我还想将解决方案限制为对CSS进行动画处理，而不是将整个解决方案置于js中，以便在关闭js的情况下轻松，优雅地降级.

I would also like to restrict the solution to animating the css rather than the entire solution being in js in order that it degrades simply and gracefully if js is turned off.

我有一个简单的无序导航列表，如下所示:

I have a simple unordered nav list like this:

<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)，当光标移离链接时.

So far so good - however I have searched high and low for a tutorial/plugin which will allow me to quickly (say 50-100 ms) fade in the background-color when the links are hovered over and fade it out slowly (say 500-1000ms) when the cursor moves off the link.

我发现有很多教程会淡化链接上的背景图像，但是几乎所有教程都涉及到每个链接都位于其自己的div或span中，而我不想这样做...

I have found many tutorials which fade in out a background image on a link but nearly all of them involve each link being in it's own div or span and I don't want to do that...

我找到了一些我认为与我正在寻找的教程接近的教程，但是不幸的是，它们没有提供如此难以确定的演示...我知道我需要同时使用主要的jQuery脚本和jQuery颜色插件或核心用户界面-我都尝试了两次，但均未成功.

I have found a couple of tutorials which I think are close to what I am looking for but unfortunately they don't provide demos so hard to be sure...I understand I need to be using both the main jQuery script and either the jQuery color plugin or the core UI - I have tried both without success.

以下是我尝试过的jQuery的一些示例:

Here are some examples of jQuery I have tried:

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中指定悬停/淡入的颜色...

and this which is very similar but I was trying to specify the hover/fade color in the 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中指定的，这是不理想的...

I also tried this but the colours are specified in the js rather than the css which is not ideal...

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

到目前为止，我还没有任何运气能对我的链接产生任何影响！我对jQuery非常陌生，因此可能会犯一些非常简单的错误，但真的很感谢这里专家的帮助.

So far I have had no luck whatsoever getting anything to have any effect on my links at all!. I am very new to jQuery so probably doing something very simple wrong but would really appreciate some help from the experts here.

非常感谢！

推荐答案

为什么不只使用CSS3过渡?根本没有JS.褪色效果在IE中不起作用，但这是一种更简洁的实现方式.而且它的降级效果还不错.

Why not just use CSS3 transitions? No JS at all. The fading effect wouldn't work in IE, but it's a much cleaner way of implementing. And it degrades just fine.

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

这篇关于如何使用jQuery淡入/淡出li a:hover css background-color?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！