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

Question

I struggled with the problem for a couple of days without success, so I decided to register here and see if any soul could help me. Fingers crossed!

I am trying to animate (fade in / out) css background-color links in an unordered list when it freezes. It is very important to maintain an unordered list structure, so I'm not looking for a solution that shares each link with its own div and animates the background color.

I would also like to limit the solution to css animations, and not the whole solution in js so that it simply and gracefully gets worse if js is disabled.

I have a simple unordered navigation list:

<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 been searching high and low for a tutorial / plugin that will allow me to quickly (say, 50-100 ms) disappear in the background when the links hang and gradually disappear (say 500-1000 ms) when the cursor is deleted by reference.

I found many tutorials that disappear from the background image by reference, but almost all of them are associated with each link that is in it with its own div or span, and I do not want to do this ...

I found a couple of tutorials that I think are close to what I'm looking for, but unfortunately they don't provide demos, so it's hard to understand ... I understand what I need to use as the main jQuery script and either jQuery color plugin, or the main user interface - I tried both without success.

Here are some jQuery examples I 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 is very similar, but I tried to specify the hover / fade color in 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 colors are in js, not css, which is not perfect ...

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

Until now, I have not been able to influence anything at all on my links at all !. I am very new to jQuery, so maybe I am doing something very simple, but really appreciate some help from the experts here.

Thank you very much!

Answer 1

Why not just use CSS3 transitions? No JS at all. The fading effect will not work in IE, but it is a much cleaner way to implement it. And it worsens 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 you want it? jQuery css fade

Demo here: Demo link

Answer 3

From the jQuery documentation :

Animation Properties and Values

All animated properties must be animated to a single numeric value, except as indicated below; most non-numeric properties cannot be animated using jQuery core functionality (e.g. width, height, or left side can be animated, but the background color cannot be if jQuery.Color () is used .