Javascript CSS class animation?

Question

Is it possible to animate class replacement in javascript?

Let's look at the following:

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

Is there a JavaScript library that can facilitate the change between the two classes? Would this not cause the user's computer to crash?

If not, what would be a good way? Javascript file created by the server?

Answer 1

Yes, jQuery can do this if you have jQueryUI .

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

Here is 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 2

jQuery, , 1 2.

http://api.jquery.com/animate/ . jQuery UI , .

Answer 3

jQuery jQueryUI.

, , :

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

, 1 2. CSS , , .

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

50, , . jQuery, jQueryUI.

jQuery aimate. css, , .

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