javascript animate dosnt loop

Question

I have a roulette game that looks like this:

I want it to slow down more and more the further it goes, so i have this code:

$(document).ready(function() {
  $("button").click(function() {
    var moveTime = Math.floor(Math.random() * 1000) + 2000
    var slowDown = 1000;
    while (moveTime > 0) {
      $("div").animate({
        left: slowDown + "px"
      });

      if (slowDown > 0) {
        slowDown--;
        moveTime = 0;
      }
      slowDown--;
      moveTime--;
    }
  });
});

div {
  position: absolute;
  float: left;
  margin: 0 0 0 -8400px;
  width: 10000px;
  height: 100px;
  background: repeating-linear-gradient(90deg, #DF0000, #DF0000 100px, #000000 100px, #000000 200px)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Start Animation</button>
<div></div>

But the problemis that it only play the animation 1 time. I have also tried with a infinityloop but that dont work either, same with pressing the button twice nothing happend the second time.

Answer 1

Not too sure if I understood well and if Rory did actually give you the answer you were expecting, but here is what I suggest.

If you want to get a roulette-like animation, you can use jQuery's animate with customized easing functions provided here : jQuery Easing Plugin.

You can get rid of your while loop and only use animate jQuery function instead, along with the Easing Plugin.

Here is what it looks like :

$(document).ready(function() {
  $("button").click(function() {
    
    // Play with these two values
    var nSpin = 4;
    var slow = 2;

    $("div")
      .stop()
      .css({ left: 0 })
      .animate({
        left: nSpin * 1000
      }, slow * nSpin * 1000, 'easeOutExpo');
    
  });
});

div {
  position: absolute;
  float: left;
  margin: 0 0 0 -8400px;
  width: 10000px;
  height: 100px;
  background: repeating-linear-gradient(90deg, #DF0000, #DF0000 100px, #000000 100px, #000000 200px)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

<button>Start Animation</button>
<div></div>

Answer 2

The problem with your code is that on successive clicks the div element is already at the left position you're trying to animate it to, so nothing appears to happen.

To fix this, reset the left position back to 0 before you run the animation again. Try this:

$(document).ready(function() {
  $("button").click(function() {
    var moveTime = Math.floor(Math.random() * 1000) + 2000
    var slowDown = 1000;
    var $div = $('div').css('left', 0); // < reset the position here

    while (moveTime > 0) {
      $div.animate({
        left: slowDown + "px"
      });

      if (slowDown > 0) {
        slowDown--;
        moveTime = 0;
      }
      
      slowDown--;
      moveTime--;
    }
  });
});

div {
  position: absolute;
  float: left;
  margin: 0 0 0 -8400px;
  width: 10000px;
  height: 100px;
  background: repeating-linear-gradient(90deg, #DF0000, #DF0000 100px, #000000 100px, #000000 200px)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Start Animation</button>
<div></div>