在动画进行时，触发 jquery 对同一元素进行动画处理

Fire jquery animate on same element while animation is in progress

本文关键字：动画 元素 处理 进行时 触发 jquery      更新时间：2023-09-26

>我有 2 个带有这些代码的按钮：

$('#btn1').on('click',function() {
   $('#div1').animate({left:500},1000);
});
$('#btn2').on('click',function() {
   $('#div1').animate({left:0},1000);
});

我希望能够在 btn2 的事件仍在进行中时触发 btn2 的事件。例如，当我快速单击两个按钮时，当前发生的情况是，我单击 btn1，div 在实际触发 btn2 的事件之前完成 left：500。

有什么想法吗？

您希望

在触发新动画之前.stop()所有动画。

你必须使用 stop（） 函数来完成此操作。按如下所示设计两个事件处理程序：

$('#btn1').on('click',function() {
  $('#div1').stop().animate({left:500},1000);
});
$('#btn2').on('click',function() {
  $('#div1').stop()animate({left:0},1000);
});

如果当前正在制作动画，这将停止div 并在其上启动新动画。

相关文章：