，以免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

默认动画/缓动.animate()是swing。

如果您将其更改为linear，它不会放慢速度。

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>

Answer 2

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速度之后，它应该是平滑的。