Javascript animation of CSS classes?

Question

Is it possible to animate the replacement of a class in javascript?

Let's consider I have this:

.class1 {background-color:blue;}  
.class2 {background-color:red;}  

Is there any Javascript library that can ease the change between the two classes? That wouldn't make the user's computer explode?

If not, what would be a good way of achieving that? A server-generated Javascript file?

Answer 1

Yes, jQuery can do this when you have jQueryUI loaded as well.

See the demo here: http://jqueryui.com/demos/addClass/

Here's an example specific to your CSS. http://jsfiddle.net/hhEpT/

div { width: 100px; height: 100px; }
.class1 {background-color:blue;}
.class2 {background-color:red;}​

<div class='class1'></div>

$('div').addClass('class2', 1000);