Jquery在悬停时淡出背景？

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

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 2

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 3

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

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

Answer 4

为了动画颜色，您需要颜色插件

Answer 5

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