jQuery: animate text color for input field?

Question

I've got this really simple piece of code that I thought was the correct way to get jQuery to animate the text color for a given input field.

$('input').animate({color: '#f00'}, 500);

But it won't work. However, I can change the text color:

$('input').css('color', '#f00');

I've tried this in both Safari 4 and Firefox 3.5 with the same (lacking) results. I'd really appreciate any input on this problem as I'm running out of hair... Thanks.

Answer 1

jQuery doesn't support color animations so you'll need the color plugin or, jQuery UI. Both allow you to use the syntax you're using for properties like background-color and color.

Answer 2

To animate color you need the jquery color plugin.

Answer 3

You'll need Color Animations plugin for this

Answer 4

Use jQueryUI and your code works as it is.

Answer 5

Thanks all of you! Somehow I had got the impression that the color plugin was already integrated with the jQuery package. I read it somewhere but apparently it wasn't true for the whole plugin.

Answer 6

I found the color plugin to be extremely flaky from one page load to another, even on a static page with the exact same code..! ColorBlend did the job perfectly time though. http://plugins.jquery.com/files/jquery.colorBlend.js%5F6.txt