I am trying to change background of div tag continuously using for loop and rgb() values . following is my code written in sample.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script >
<script>
$(document).ready(function(){
var r=0;
var g=0;
var b=0;
for(r=0;r<255;r++)
{
for(g=0;g<255;g++)
{
for(b=0;b<255;b++)
{
$("#sqr").css("background-color","rgb(r,g,b)");
}
}
}
});
</script>
<style>
#sqr{background-color:rgb(255,0,0);
height:200px;
width:200px;
}
</style>
</head>
<body>
<div id="sqr">
</div>
</body>
</html>
so can enyone tell me how should i make a code so that background color of div keeps changing automatically when page is loaded ? Note that i want to change color very smoothly.
If you want to see how effects i want then visit:here and see effects its showing.
As per some suggestions I have changed my code to:
$("#sqr").css("background-color","rgb("+r+","+g+","+b+")");
Now it is taking values of rgb correctly ,but not loading effects correctly in browser,shows me dialog box:
