在進行動畫時，在同一元素上觸發jQuery動畫

Question

我有兩個帶有以下代碼的按鈕：

$('#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並在其上啟動新動畫。