How to use jQuery to fade in/out li a:hover css background-color?

Question

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!

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.

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>

This is my 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;}

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.

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...

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.

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

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

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

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.

Many thanks!

Answer 1

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

Answer 2

I think what you want is this? jQuery css fade

Demo here: Demo link