无限循环功能？

我有一个函数，我需要循环无限。所以，该功能永远不会停止工作。这里是我到目前为止工作的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);

可能有人请此建议？提前致谢。

来源

2017-10-10 David Hope

似乎是一个X/Y的问题，因为你正在修改的动画风格。看看关键帧而不是 – adeneo

使用while循环。 – jburtondev

@jburtondev'-1'不够jQuery –

你的意思是说像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>

来源

2017-10-10 15:19:50

结果看起来如此迷人。 –

无限循环功能？

回答

相关问题