消防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如果當前動畫，並開始在其新的動畫。