Motyar

@motyar

Freelance Web Developer

Static Web Hosting, made easy

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: , , ,




By :