JQuery Color Changing Background | JQuery Continous Color Change | JQuery Rainbow

In today's tutorial, I am going to share an easy way to change the background color of a page in infinite loops. In other words, change the background to rainbow.

Concept:The actual logic behind changing the color in infinite loops, is to get infinite colors. So trick is simple, take a RGB pattern and keep on changing the color code. So for that a logic of RGB code is written in jquery.color.js

So the index javascript consists of two major codes.

[html]

var rainbow = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';

[/html]

We are creating a variable named as rainbow and setting its value to rgb(random numbers). They are calculated and by using math.round and math.floor functions, the decimals are removed from it.

The last important thing is to append the color to the background of an HTML element.

[html]
$('#welcome').animate( { backgroundColor: rainbow }, 1000);
[/html]

The most important thing is how to get into infinite loops?????

Simple, within the function declare the same function, which will give us infinite loop.

So the entire javascript function will be.

[html]
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {

spectrum();

function spectrum(){
var rainbow = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$('#welcome').animate( { backgroundColor: rainbow }, 1000);
spectrum();
}

});
// ]]></script>
[/html]