消防jQuery的动画，而动画制作过程中

Question

我有2个按钮与这些代码：

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

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

我希望能够发射BTN2的事件，而BTN1的活动仍在进行中。当我快速点击两个按钮时，目前发生的事情是，例如，我点击btn1，div移动并完成左边：500，然后再实际触发btn2的事件。

任何想法？

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如果当前动画，并开始在其新的动画。