javascript - 动画正在进行时在同一元素上触发 jquery 动画

Question

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

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

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

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

有任何想法吗？

Answer 1

您想要.stop()在触发新动画之前完成所有动画。

Answer 2

您必须使用 stop() 函数来完成此操作。像这样设计两个事件处理程序：

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

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

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