Motyar

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 :

4 comments

#

Anonymous Anonymous says…

This animation looks so cool, i am using this for my site's header background.
All other tutorials of this site are also very useful, thanx for sharing such a great ideas.

I really love this on - http://motyar.blogspot.com/2010/03/page-curl-fold-or-peel-effect-with-pure.html
 
#

Blogger Dharmveer Motyar says…

@Anonymous please comment with your reall identity, name or Url.
Thanx for your love. keep reading!!
 
#

Anonymous Anonymous says…

this sucks
 
#

Blogger creanónimo says…

Thank you for sharing your findings!

Do your know if it works with the the colour alpha property. rgba values?

Peace
 

Post a Comment