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

If you can use jQuery it is having animate function which will allow you to animate from class1 to class2.

here is a link

http://api.jquery.com/animate/ for normal animations. Use jQuery UI for animation between classes as suggested in another answers.

Answer 2

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);

Answer 3

You can use a combination of jQuery and jQueryUI.

Let's say for example you have a paragraph like this:

<p id="notice" class="class1">This is something to highlight</p>

So basically you want to animate the replace of class1 with class2. Since CSS allows you to override styles, you can simply add a new class and it will override the initial effect.

$("#notice").addClass("class2", 50);

Where 50 is obviously how long the animation takes. For this to work you need to reference both the jQuery and jQueryUI libraries.

The alternative is to use the jQuery animate method. Basically you specify the css that drives the animation, the duration, and a callback.

$('#clickme').click(function() {
  $('#notice').animate(
      {background-color: yellow}, 
      5000, 
      function() {
        $("#notice").removeClass("class1");
      });
});