jQuery plugin to animate colors from one class to another

Question

There are a lot of jQuery color plugins. However I couldn't find the one to animate between css class declarations.

For example doing a smooth animation from .class1 to .class2:

.class1 { background-color: #000000 }
.class2 { background-color: #000088 }

Is this possible at all?

score 6 · Accepted Answer · edited Nov 11 '10 at 05:09

6

The jQuery animate() command already allows you to animate colour transitions.

Here's a more striking demo

EDIT:

To get the same effect with CSS classes, there is

jQuery UI's switchClass(add, remove, duration)
Igor Vieira's animateToClass plugin
James Padolsey's animateToSelector plugin

edited Nov 11 '10 at 05:09

Alex Angas

59,219
41
137
210

answered Oct 20 '09 at 07:42

Russ Cam

124,184
33
204
266

see updated answer. IIRC, switchClass is somewhat temperamental and doesn't work at all in Chrome. – Russ Cam Oct 20 '09 at 08:28

Elzo Valugi · Answer 2 · 2009-10-20T07:40:35.753

2

I think a plugin can be done that will read all computed properties of class A, match them with the properties of class B, animate what it can be animated, and ignore the rest of properties.

I have not seen no one out there but it can be done.

edited Oct 20 '09 at 07:40

answered Oct 20 '09 at 07:31

Elzo Valugi

27,240
15
95
114

I've had some lag, is before coffee :) – Elzo Valugi Oct 20 '09 at 07:41

jQuery plugin to animate colors from one class to another

2 Answers2

Linked