views:

83

answers:

2

I've a link named #link.

It changes color after hover, like this:

$("#link").hover(function(){
     $(this).css({color: '#fed900'});
});

All I want to do is smooth, animated color change.

I know I have to put .css in an .animation somehow, but can't figure it out how.

I think that's the right way, but it doens't work at all:

$("#link").hover(function(){
     $(this).animate( { css({color: '#fed900'}) }, "slow" );
});

I've also tried like this:

$(this).animate({ .css({color: '#fed900'}), "slow" });   

But I'm still wrong somehow. Any helping hand? I know I'm missing something really small.

A: 

The call to .animate() looks like this:

$("#link").hover(function(){
  $(this).animate({ color: '#fed900'}, "slow");
}, function() {
  $(this).animate({ color: '#000000'}, "slow"); //original color
});

You can give it a try here. But keep in mind that you need to include either the color plugin or jQuery UI, since jQuery core doesn't support color animations.

Nick Craver
Brilliant! I don't know why was pushing the .css thing BUT your way doesn't work in Opera (at least for me)? :>
fomicz
@fomicz - Are you including the color plugin or jQuery UI?
Nick Craver
I have only jquery lib. How to include the color plugin?
fomicz
@fomicz - You can find the source here: http://plugins.jquery.com/files/jquery.color.js.txt Sorry that took a bit...they redid the plugins site, and not for the better.
Nick Craver
A: 

you have a stray css({}) in there, the call should look like this:

$("#link").hover(function(){
     $(this).animate( {color: "#fed900"}, "slow" );
});
Mark E
doesn't work for me.
fomicz