関数を無限ループしていますか？

Question

私は無限にループする必要がある関数を持っています。したがって、関数は決して動作を停止しません。ここで私がこれまで持っているものの作業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); 

誰かがこの上でアドバイスをしてくださいもらえますか？前もって感謝します。

Answer 1

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>