按鈕單擊后停止動畫

Question

我有兩個控制上面圖像的按鈕，它們基本上改變了正向或反向的圖像。 我的代碼如下：

  slider.fadeOut(400, function() {
    $(this).attr('src', images[index]);
  }).fadeIn(400);
  console.log(index);
});

問題是，如果我有多次按鈕點擊，圖像會改變，但我的淡入淡出動畫會發生很多次，而不只是一次更改圖像。

有沒有辦法停止當前動畫，並繼續淡入下一個圖像？ 我只是不想要多次按鈕點擊，然后像5淡入淡出后。

Answer 1

您可以使用stop()方法來實現此目的。 提供true作為第一個參數也將清除以下任何動畫的隊列，這在有人重復觸發父事件時很有用。 嘗試這個：

slider.stop(true).fadeOut(400, function() {
  $(this).attr('src', images[index]);
}).fadeIn(400);