如何使div标签的背景颜色不断变化使用JQuery？ [英] How to make background color of div tag keep changing using JQuery?
问题描述
我对JQuery非常陌生：
我试图使用for循环和rgb（）值连续更改div标签的背景。
以下是我在sample.html中编写的代码：
<！DOCTYPE html>
< html lang =en>
< head>
< title>样本< / 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;
对于（b = 0; b
），对于（r = 0; r <255; r ++） 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>
所以可以enyone告诉我应该如何制作代码，以便div的背景颜色自动变化页面加载？
请注意，我想非常顺利地改变颜色。
如果您想查看我想要的效果，请访问：
.animate {
height：200px;
width：400px;
border：1px solid＃000;
-webkit-animation：animate_bg 5s;
动画：animate_bg 5s;
-webkit-animation-iteration-count：infinite;
animation-iteration-count：infinite;
}
@keyframes animate_bg {
0％{background：red;}
50％{background：green;}
100％{background：蓝色;}
}
@ -webkit-keyframes animate_bg {
0％{background：red;}
50％{background：green;}
100％{background：blue;}
}
因此您可以参阅此链接以获得浏览器支持。
有很多 polyfills 可用于不支持CSS3的浏览器 @keyframes ，所以你可能需要使用它如果您希望支持旧版浏览器，如果您不关心旧版浏览器，那么您可以毫不犹豫地使用它。
I am new to JQuery so bare with me: 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 :
So, please suggest me some solution on that to resolve this problem. Thank u in advance . .
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.
.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.
这篇关于如何使div标签的背景颜色不断变化使用JQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
