jQuery fadeTo() for colors

Question

I want an equivalent of fadeTo() for colors, instead of opacity.

For example, starting with backgroundColor = "red", how can I gradually move to backgroundColor = "green" with jQuery?

You can use jquery color plugin. http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — Sergei Sheludchenko, Jul 24 '11 at 20:01

score 4 · Accepted Answer · answered Jul 24 '11 at 19:56

4

You may also use CSS3 transitions which I prefer. Not supported in Internet Explorer 9 or older. Will be supported in Internet Explorer 10.

answered Jul 24 '11 at 19:56

knut

Try the link. It has a perfect example. – knut Jul 24 '11 at 19:59
Ah, beg your pardon. animate() will indeed do the job. – Randomblue Jul 24 '11 at 19:59

score 4 · Answer 2 · answered Jul 24 '11 at 20:00

4

You could use animate()

 $('#yourdiv').animate({ backgroundColor: "green" }, 1000)

answered Jul 24 '11 at 20:00

Nicola Peluchetti

Actually, this doesn't seem to work. Here is was the documentation says: "All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, `width`, `height`, or `left` can be animated but `background-color` cannot be.)" – Randomblue Jul 24 '11 at 21:02

2 Answers2