按钮单击后停止动画

Question

I have two buttons that control the image above, and they basically change the image in the forward direction or reverse direction. My code is as follows:

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

The problem is that if I have multiple button clicks, the image changes, but my fade animation happens like many times after, not just once to change the image.

Is there a way to stop the current animation, and proceed to fade in the next image? I just dont want multiply button clicks and then like 5 fade in's after.

Answer 1

You can use the stop() method to achieve this. Providing true as the first parameter will also clear the queue of any following animations, which is useful if someone has repeatedly triggered the parent event. Try this:

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

http://api.jquery.com/stop