9

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.

  • possible duplicate of [jQuery animate backgroundColor](http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor) – mercator Dec 03 '10 at 10:02

6 Answers6

19

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.

John Foster
  • 8,697
  • 2
  • 35
  • 37
2

To animate color you need the jquery color plugin.

redsquare
  • 78,161
  • 20
  • 151
  • 159
2

You can do this without the color plugin. I've answered this question here.

Community
  • 1
  • 1
matadur
  • 819
  • 9
  • 10
0

You'll need Color Animations plugin for this

n1313
  • 20,555
  • 7
  • 31
  • 46
  • 1
    And you can learn about this on the first page of google search http://www.google.ru/search?q=jquery+animate+color – n1313 Aug 30 '09 at 17:09
0

Use jQueryUI and your code works as it is.

kaiz.net
  • 1,984
  • 3
  • 23
  • 31
0

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_6.txt