Link animated color changing in jQuery?

Question

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.

Answer 1

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.

Answer 2

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

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