停止 fadin/fadeout 事件 jquery

Question

我有一个在点击时闪烁一次的潜水。如果您多次按下该按钮，它将一直闪烁，直到执行了点击计数。我想这样，如果用户多次单击该按钮，它会在最后一次单击后停止闪烁。

示例https://jsfiddle.net/va6njdry/

$('button').click(function () {
    $('div').fadeOut().fadeIn().fadeOut().fadeIn();
});

Answer 1

使用stop停止之前的动画。

$('button').click(function () {
    $('div').stop(true, true).fadeOut().fadeIn().fadeOut().fadeIn();
    //       ^^^^^^^^^^^^^^^^
});

演示：https://jsfiddle.net/tusharj/va6njdry/1/

文档：http://api.jquery.com/stop/

Stop the currently-running animation on the matched elements.

编辑

感谢@AWolff

您也可以使用finish

$('button').click(function () {
    $('div').finish().fadeOut().fadeIn().fadeOut().fadeIn();
    //       ^^^^^^^^
});

演示：https://jsfiddle.net/tusharj/va6njdry/4/

文档：https://api.jquery.com/finish/

Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.