我有这个代码测试:
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() 的文档
我没有看到任何关于队列之间延迟的提及,
如有任何想法或解决方法,我们将不胜感激。
最佳答案
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
,应该会更流畅。
关于javascript - 防止同一元素上队列之间的 jQuery 动画延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43843728/