Jquery fade background on hover?

Question

There is a link, with no background, and a css rule, which changes background on hover.

Parent bg is white, link on hover - blue.

How can I do a hover effect slowly, from white to blue?

Thanks.

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

Answer 1

In order to animate colors, you need the color plugin

Answer 2

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

For this to work you need to download the "color plugin" for jQuery.

Answer 3

You'll need to use a plugin as JQuery can't animate colours out of the box.

Try the Colour Animation plugin

Then it'll be something like:

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

Answer 4

Thanks, and one more, how can I do same effect if I have an image background instead of simple color?

Answer 5

You don't need an extra color plugin. You just need jQuery UI on top of jQuery, which lets you do animations also on color. (Or if you don't want to use jQuery UI for some reason, I guess another plugin will do the trick. But I have successfully tried this with just including jQuery core and jQuery UI.)

Animation itself goes something like...

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

Answer 6

bgFade a very great and simple plugin that animates de background image:

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

Answer 7

jQuery UI heavy on the file size compared to a few kb plug in