无限循环功能?
问题描述:
我有一个函数,我需要循环无限。所以,该功能永远不会停止工作。这里是我到目前为止工作的jsfiddle:https://jsfiddle.net/j52dhetq/7/无限循环功能?
$(document).ready(function() {
function playslider() {
$(".box").each(function(index) {
$(this).delay(400 * index).queue(function(next) {
$(this).css('transition-timing-function', 'ease-in-out');
$(this).css('animation', 'progress ' + 400 * index + 'ms');
next();
});
});
x = setTimeout(function() {
playslider()
}, 5000);
}
playslider();
});
我一遍又一遍需要playslider();
功能回路和永不停歇。 目前我的代码运行良好,但它永远不会循环。我尝试了setTimeout()
,但这并不做任何事情:
x = setTimeout(function(){
playslider()
}, 5000);
可能有人请此建议?提前致谢。
答
你的意思是说像infinite
?
$(".box").css("animation", function(i) {
return 'progress 1400ms '+ (120*i) +'ms ease-in-out infinite';
});
body{background:#ccc;}
.box{width:12%; height:10px; display:inline-block; margin-right:-4px;}
@keyframes progress {
50% {background-color:#ccc;}
}
<div>
<div class="box" style="background-color:red;"></div>
<div class="box" style="background-color:orange;"></div>
<div class="box" style="background-color:yellow;"></div>
<div class="box" style="background-color:green;"></div>
<div class="box" style="background-color:blue;"></div>
<div class="box" style="background-color:purple;"></div>
<div class="box" style="background-color:navy;"></div>
<div class="box" style="background-color:white;"></div>
</div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
+0
结果看起来如此迷人。 –
似乎是一个X/Y的问题,因为你正在修改的动画风格。看看关键帧而不是 – adeneo
使用while循环。 – jburtondev
@jburtondev'-1'不够jQuery –