javascript - 防止同一元素上队列之间的 jQuery 动画延迟

Question

我有这个代码测试:

var rate = 50;
var x = 0;

for (var i = 0; i < 15; i++) {
  console.log("looped: " + i);
  $('#mydiv').animate({
    "left": x += rate
  }, 500);
}

html,
body {
  margin: 0px 0px;
}

#mydiv {
  position: absolute;
  top: 0px;
  left: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="mydiv">Animate Test</div>

For 循环对同一个元素进行 15 次动画处理，循环内的所有 15 次动画调用都会排队。

这个动画函数一次运行每个队列，

问题:每个队列执行之间有一个延迟时间(我猜可能是 500 毫秒)，

您可以运行代码片段并注意到延迟。

我想让元素像移动一样不停地执行下一个队列，立即执行它而没有延迟，就像平滑移动一样。

我阅读了很多关于 jQuery .animate() 的文档

我没有看到任何关于队列之间延迟的提及，

如有任何想法或解决方法，我们将不胜感激。

Answer 1

var rate = 50;
var x = 0;

for (var i = 0; i < 15; i++) {
  console.log("looped: " + i);
  $('#mydiv').animate({
    "left": x += rate
  }, 500,"linear");
}

html,
body {
  margin: 0px 0px;
}

#mydiv {
  position: absolute;
  top: 0px;
  left: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="mydiv">Animate Test</div>

在速度后面加上linear，应该会更流畅。