JQuery fade background on hover?

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; } 
+6
javascript jquery css
source share
5 answers
 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.

+11
source share

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

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

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

+2
source share

You need a color plugin to bring colors to life.

+1
source share

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'); 
+1
source share

All Articles