Question

我有一个函数，我需要无限循环。因此，该功能永远不会停止工作。这是迄今为止我所掌握的工作方式：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>

无限循环功能？

1 个答案: