如何在一段时间内逐渐将值更改为另一个值？

Question

if(!isWalking) {
      isWalking = true;
      var animation = setInterval(function () {$player.css({'left': "+="+boxSize/25})}, 10);
      setTimeout(function(){clearInterval(animation)},250);
      setTimeout(function(){isWalking = false},250);
}

此代码应该在1/4秒的时间段内完全按照boxSize的大小增加对象的x坐标。似乎代码必须非常快地执行，因此它会变慢，并且在清除间隔时对象无法管理到达目标。即使我增加间隔并减少重复，也可能是某些计算机无法播放它。是否有更可靠的可能使用重复次数而不是时间？此外，在播放动画时，用户不应该做任何事情，因此isWalking变量。

Answer 1

使用$ .animate（请参阅docs）

isWalking = true;
$player.animate({
      left: futureValue
  },
  250,           // number of milliseconds animation should last
  "swing",        // easing property (see the docs)
  function() {    // callback that will run when animate completes
    isWalking = false;
});