Jquery -改变CSS属性和重复
jquery -changing css property and repeating
我有这个精灵表http://codepen.io/benasl/pen/yabpxo,我想在它结束后更改为另一个,在第二个结束后,第一个需要重新开始,等等…我设法做到这一点,只是改变css属性,但现在我如何使他们循环?
setTimeout(function() {
$(".kambarys2").css('display', 'block');
}, 3100);
body {
background-color: #69e4c3;
}
.kambarys {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
@keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
.kambarys2 {
background: url('http://i.imgur.com/TFvZvWz.jpg');
background-repeat: no-repeat;
position: absolute;
display: inline-block;
width: 380px;
height: 372px;
top: 108px;
left: 40%;
animation: convejor 3s steps(76) infinite;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys"></div>
<div class="kambarys2"></div>
- 使用数组改变背景图像:
var cnt=0,images=["http://i.imgur.com/TFvZvWz.jpg","http://i.imgur.com/pra08AS.jpg"]
setInterval(function() {
$(".kambarys").css({"background-image":"url("+images[cnt]+")"});
cnt++;
if (cnt>=images.length) cnt=0;
}, 3100);
body {
background-color: #69e4c3;
}
.kambarys {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
@keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys"></div>
var cnt=0;
setInterval(function() {
$(".kambarys0").toggle(cnt);
$(".kambarys1").toggle(!cnt); cnt=!cnt
}, 3100);
body {
background-color: #69e4c3;
}
.kambarys0 {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
.kambarys1 {
display:none;
background: url('http://i.imgur.com/TFvZvWz.jpg');
background-repeat: no-repeat;
position: relative;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
@keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys0"></div>
<div class="kambarys1"></div>
- 循环超过两个div
var cnt = 0;
setInterval(function() {
cnt++;
if (cnt >= $(".kambarys").length) cnt = 0;
$(".kambarys").hide();
$("#kambarys" + cnt).show();
},
3100);
body {
background-color: #69e4c3;
}
.kambarys {
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
#kambarys0 {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
}
#kambarys1 {
display: none;
background: url('http://i.imgur.com/TFvZvWz.jpg');
background-repeat: no-repeat;
}
#kambarys2 {
display: none;
background: url('http://i.imgur.com/F6bNA00.jpg');
background-repeat: no-repeat;
}
@keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys" id="kambarys0"></div>
<div class="kambarys" id="kambarys1"></div>
<div class="kambarys" id="kambarys2"></div>
一个答案是你有一个函数,这个函数会每X秒重新启动一次。
的例子:
function startcounter() {
$( "#foo" ).append( "<p>Test</p>" ); // do what you want
setTimeout(startcounter, 3*1000); // 3*1000 = 3 Seconds.
}
setTimeout(startcounter, 3*1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"><p>This is the div where the JS add every 3 Seconds a "Test".</p></div>
相关文章:
- 获取HTML属性中CSS声明的值
- 谷歌图表-如何更改整个表的css属性
- 如何通过HTML+CSS中的另一个元素Selector更改元素的属性值
- Css order属性不't在Jquery设置时更新
- CSS中的游标属性似乎不适用于USB On The Go
- 重写CSS:使用jquery显示none属性
- CSS样式属性留空
- 如何在CSS或Javascript中定位选定的属性(在HTML选项中)
- 从CSS到Javascript的属性值
- Android在HTML容器中滚动,该容器具有CSS溢出属性
- 将css属性替换为变量
- 使用Jquery/Javascript替换CSS属性
- 带有CSS的数据属性就没那么有用了
- 如何使用JavaScript查找未定义的CSS属性的值
- 在jquerymobile中设置按钮css属性的动画
- 使用javascript和css选择器获取value属性的内容
- JavaScript无法提取引号css属性
- 使用AngularJS动态更改css属性
- 使用javascript获取具有特定CSS属性的所有元素
- 将css属性添加到对象的集合中