Jul 27, 2010

Animate Color using Jquery

I was trying to animate a change in backgroundColor using jQuery.It works with other properties like fontSize, but with backgroundColor there was an error of  "Invalid Property". I found a plug-in named "color plugin".

I found one other solution - It can be done by including jQuery UI.Lets see which one is better.



We are taking an example of SuperNova Animation with Jquery, It works on background color animation.

Animate Color using jQuery UI

You can load Jquery UI with help of Google's AJAX API

<!-- include Google's AJAX API loader -->
<script src="http://www.google.com/jsapi"></script> 

<!-- load JQuery and UI from Google (need to use UI to animate colors) -->

<script type="text/javascript">
//nova function 

 function nova(){ 

           //generating random rgb color

           var color = 'rgb("+

                        Math.floor(Math.random()*255)+","+

                        Math.floor(Math.random()*255)+","+

                        Math.floor(Math.random()*255)+")';

$(document.body).animate({ 

           //animate background color

           backgroundColor:color
                        }, 1000); 

          //Setting up timeout, It calls itself after given time

           window.setTimeout("nova()",1100);                            
}

$(document).ready(function() { 

          //Calling nova first time   
          nova();
});</script>

Animate Color using jQuery color animations plugin.

Here is an example how to use it:

$(this).animate({ backgroundColor: "#f6f6f6" }, "fast");



Which one it better?

The color plugin is only 4kb, easy to load than the UI library.but it doesnt support rgb colors. The color plugin has issues with Safari and Chrome. It only works sometimes, jQuery UI version works on all browsers.
I think using jQuery UI is better than Color Plugin. Its working well for me.

Demo

You can see the working demo of SuperNova Animation here.

Labels: Animation, css, jquery, Tutorials

By : Motyar+ @motyar