Wie kann man mit JQuery die Hintergrundfarbe des div-Tags ändern?

Ich versuche, den Hintergrund des div-Tags kontinuierlich zu ändern, indem ich for-Schleifen- und rgb () -Werte verwende. Folgendes ist mein Code in sample.html geschrieben:

    <!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>

Kann mir jemand sagen, wie ich einen Code erstellen soll, damit sich die Hintergrundfarbe von div automatisch ändert, wenn die Seite geladen wird? Beachten Sie, dass ich die Farbe sehr sanft ändern möchte.

Wenn Sie sehen möchten, wie die gewünschten Effekte wirken, besuchen Sie:Hier und sehen, wie die Effekte angezeigt werden.

Gemäß einigen Vorschlägen habe ich meinen Code geändert in:

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

Jetzt werden die Werte von rgb korrekt übernommen, aber die Effekte werden im Browser nicht korrekt geladen. Das folgende Dialogfeld wird angezeigt:

Antworten auf die Frage(3)

Ihre Antwort auf die Frage