Question

我正在尝试使用for循环和rgb（）值连续更改div标签的背景。以下是我在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>

所以可以告诉我如何制作代码，以便在加载页面时div的背景颜色不断变化？请注意，我想非常顺利地改变颜色。

如果你想看看我想要的效果，请访问：here并查看其效果。

根据一些建议，我已将代码更改为：

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

现在它正确地获取了rgb的值，但没有在浏览器中正确加载效果，显示对话框：

Dialog Box

Answer 1

由于这个问题被标记为CSS，我想为此贡献一个纯CSS解决方案，只需使用CSS3 @keyframes，你可以简单地为你想要的元素添加颜色，可以使用{{}来执行动画。 1}}并且，您也可以使用%并将其设置为animation-iteration-count。如果你想在有限的时间内迭代它，只需将infinite更改为你想要的任何值，但要确保它是一个整数。

Demo

infinite

这是在CSS3规范中引入的，因此您可以参考this链接获取浏览器支持。

有许多polyfills可用于不支持CSS3 .animate { height: 200px; width: 400px; border: 1px solid #000; -webkit-animation: animate_bg 5s; animation: animate_bg 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @keyframes animate_bg { 0% {background:red;} 50% {background:green;} 100% {background:blue;} } @-webkit-keyframes animate_bg { 0% {background:red;} 50% {background:green;} 100% {background:blue;} }的浏览器，因此如果您希望支持较旧的浏览器，则可能需要使用此项，如果您不关心旧的，比你可以毫不犹豫地使用它。

Answer 2

除了设置CSS的代码外，一切似乎都很好。

更改代码：

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

致：

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

现在将传递数值，即

$("#sqr").css("background-color","rgb(254,254,254)");

之前它只是简单地传递了值r,g,b，因为你将它们放在一个字符串中。

Answer 3

您可以使用.setInterval()

将您的代码包含在名为animate

的函数中

var intervalID = window.setInterval(animate, 500);

不确定是否正确

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

如何使用JQuery使div标签的背景颜色不断变化？

3 个答案: