jQuery plugin to animate colors form one class to another

Question

Hi all,

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?

Answer 1

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.

Answer 2

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's switchClass(add, remove, duration)

• Igor Vieira's animateToClass plugin

• James Padolsey's animateToSelector plugin