CODEWITHSUNDEEP
javascriptjqueryanimationevent-handling
user1320260
user1320260

Reputation:

Stop fadin/fadeout event jquery

I have a dive that flashs once on click. If you press the button multiple times it will keep flashing until the click count has been executed. I would like to so then if the user was to click the button multiple times, it would stop flashing after the last click.

Example https://jsfiddle.net/va6njdry/

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

Upvotes: 0

Views: 522

Answers (1)

Tushar
Tushar

Reputation: 87203

Use stop to stop previous animations.

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

Demo: https://jsfiddle.net/tusharj/va6njdry/1/

Docs: http://api.jquery.com/stop/

Stop the currently-running animation on the matched elements.

Edit

Thanks to @AWolff

You can also use finish

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

Demo: https://jsfiddle.net/tusharj/va6njdry/4/

Docs: https://api.jquery.com/finish/

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

Upvotes: 5

Related Questions