按钮单击后停止动画

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);