javascript 动画不循环

Question

我有一个如下所示的轮盘游戏：

我希望它越走越慢，所以我有这个代码：

$(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>

但问题是它只播放了1次动画。我也尝试过无限循环，但也没有用，就像按两次按钮一样，第二次没有任何反应。

Answer 1

您的代码存在的问题是，在连续点击时，div 元素已经位于您尝试将其设置为动画的 left 位置，因此似乎没有任何反应。

要解决此问题，请在再次运行动画之前将 left 位置重置回 0。试试这个：

$(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>

Answer 2

不太确定我是否理解得很好，Rory 是否真的给了您所期望的答案，但这是我的建议。

如果你想获得类似轮盘的动画，你可以使用 jQuery 的 animate 和此处提供的自定义缓动函数：jQuery Easing Plugin.

您可以摆脱 while 循环，只使用 animate jQuery 函数，以及 Easing Plugin。

这是它的样子：

$(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>

javascript 动画不循环

javascript animate dosnt loop

javascript

jquery

jquery-animate