使用 jquery 的第一个动画后滞后
Posted
技术标签:
【中文标题】使用 jquery 的第一个动画后滞后【英文标题】:Lag after first animation with jquery 【发布时间】:2021-12-25 14:02:06 【问题描述】:我的目标是在您按住按钮时从一开始就保持动画流畅。 是什么导致第一个动画后的滞后?如何在一次只允许一个队列的情况下摆脱它?
function move()
var queue = jQuery.queue($("#hero")[0], "fx");
if (queue.length < 2)
$('#hero').animate(
width: '+=30px'
,
easing: 'linear',
queue: false,
duration: 200
);
$(document).keydown(function(e)
if (e.keyCode == 68) //D Right
$("#hero").queue(function()
move();
$.dequeue(this);
);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hero" style="width:10px;height:30px;left:0px;background-color:red;">
</div>
【问题讨论】:
【参考方案1】:在决定是否以及何时增加#hero
宽度时,您需要使用键事件来跟踪在任何给定时刻哪些键被按下,而不是直接对按键做出反应,然后从基于setTimeout()
的循环独立于关键事件运行。
$(function() // document.ready
let keys = ;
let object = $('#hero');
$(document).keydown(function(event)
keys[event.which] = true;
).keyup(function(event)
delete keys[event.which];
);
function move()
if (keys[68]) // D key
object.css("width", function(i,oldVal)
return parseInt(oldVal) + 25 + "px";
);
setTimeout(move, 20);
move();
);
#hero
transition-property: width;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hero" style="width:10px;height:30px;left:0px;background-color:red;">
</div>
【讨论】:
以上是关于使用 jquery 的第一个动画后滞后的主要内容,如果未能解决你的问题,请参考以下文章
Jquery - 动画滚动对角线,野生动物园不工作,镀铬滞后