JQuery fade background on hover?

Question

There is a link, no background, and a css rule that changes the background on hover.

Parent bg is white, link to hover is blue.

How can I make the hover effect slowly , from white to blue?

Thanks.

li a {} li a:hover { background: blue; } 

Answer 1

 jQuery('a#theLink').hover(function(){ $(this).stop().animate({backgroundColor: 'blue'}); }, function() { $(this).stop().animate({backgroundColor: 'white'}); }); 

To do this, you need to download the " color plugin " for jQuery.

Answer 2

You do not need an additional color plugin. You just need the jQuery UI on top of jQuery, which allows you to do animations also in color. (Or, if you do not want to use jQuery UI for some reason, I think another plugin will do the trick. But I successfully tried this by simply enabling the jQuery core and jQuery UI.)

The animation itself is similar ...

 $("li").hover(function() { $(this).animate({ backgroundColor: "#ffffff" }, 'slow'); }); 

Answer 3

bgFade is a very large and simple plugin that animates the background image:

http://www.isthatclear.com/jquery/bgFade/

Answer 4

You need a color plugin to bring colors to life.

Answer 5

You need to use the plugin since jQuery cannot animate colors out of the box.

Try the color animation plugin

Then it will be something like:

 $(this).animate({ backgroundColor: "blue" }, 'slow');