Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
711 views
in Technique[技术] by (71.8m points)

html - How to make background color of div tag keep changing using JQuery?

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:

Dialog Box

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

As this question is tagged as CSS, I would like to contribute a pure CSS solution to this, simply use CSS3 @keyframes and you can simply add colors to the element you want, can step the animation using % and also, you can use animation-iteration-count and set it to infinite. If you want to iterate it for limited times, just changed the infinite to whatever value you desire but make sure it's an integer.

Demo

.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;}
}

This is introduced in CSS3 spec, so you can refer this link for browser support.


There are many polyfills available for the browsers which are not supporting CSS3 @keyframes, so you may need to use this if you are looking to support older browsers, if you don't care about the old one's, than you can use this without any hesitation.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...