使用 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 的第一个动画后滞后的主要内容,如果未能解决你的问题,请参考以下文章

2个动画之间的滞后

Jquery - 动画滚动对角线,野生动物园不工作,镀铬滞后

谷歌浏览器 jQuery 动画在谷歌浏览器中滞后

Jquery 缓动动画在 iPad 上滞后

如何防止这种奇怪的 jQuery .animate() 滞后?

jQuery 滚动延迟(滞后)在 chrome 上但在 firefox 上平滑