按钮单击后停止动画

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

http://api.jquery.com/stop