CODEWITHSUNDEEP
javascriptjquery
David Hope
David Hope

Reputation: 1546

Looping the function infinitely?

I have a function that I will need to loop infinitely. So, the function never stops working. Here is a working jsFiddle of what I have so far: 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();
});

I need the playslider(); function to loop over and over and never stops. Currently my code runs fine but it never loops. I tried a setTimeout(), but this doesn't do anything: 

x = setTimeout(function(){
  playslider()
}, 5000);

Could someone please advice on this? Thanks in advance.

Upvotes: 1

Views: 66

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206689

You mean something like 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>

Upvotes: 2

Related Questions