单击按钮后停止动画答案

【问题标题】：Stop animation after button click单击按钮后停止动画
【发布时间】：2017-01-19 21:51:11
【问题描述】：

我有两个按钮来控制上面的图像，它们基本上可以向前或向后改变图像。我的代码如下：

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

问题是，如果我有多个按钮点击，图像会改变，但我的淡入淡出动画会发生很多次，而不仅仅是一次改变图像。

有没有办法停止当前动画，并继续淡入下一张图像？我只是不想多次单击按钮，然后像 5 次淡入一样。

【问题讨论】：

【解决方案1】：

您可以使用stop() 方法来实现这一点。提供true 作为第一个参数也将清除所有后续动画的队列，如果有人反复触发父事件，这很有用。试试这个：

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

【讨论】：