¿Cómo hacer que el color de fondo de la etiqueta div siga cambiando usando JQuery?

Estoy tratando de cambiar el fondo de la etiqueta div continuamente utilizando los valores de bucle y rgb (). El siguiente es mi código escrito en 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>

Entonces, ¿alguien puede decirme cómo debo hacer un código para que el color de fondo de div siga cambiando automáticamente cuando se carga la página? Tenga en cuenta que quiero cambiar de color muy suavemente.

Si quieres ver los efectos que quiero, entonces visita:aquí Y ver los efectos que está mostrando.

Según algunas sugerencias he cambiado mi código a:

$("#sqr").css("background-color","rgb("+r+","+g+","+b+")");

Ahora está tomando los valores de rgb correctamente, pero al no cargar los efectos correctamente en el navegador, me muestra el cuadro de diálogo:

Respuestas a la pregunta(3)

Su respuesta a la pregunta