CODEWITHSUNDEEP
javascriptjquerycss
Gelens
Gelens

Reputation:

Jquery fade background on hover?

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; }

Upvotes: 6

Views: 31497

Answers (5)

tothemario
tothemario

Reputation: 6279

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

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

Upvotes: 2

Jaanus
Jaanus

Reputation: 17856

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

Upvotes: 7

Fermin
Fermin

Reputation: 36081

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

Upvotes: 1

James
James

Reputation: 111880

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.

Upvotes: 11

Restore The Data Dumps Again
Restore The Data Dumps Again

Reputation: 39325

In order to animate colors, you need the color plugin

Upvotes: 1

Related Questions