How can I delete the previous animation and start a new one?

Question

JavaScript

Hello. Tell me please.
There is an animation that runs in a loop for each element in the set with a delay of every 1000ms. The animation is triggered when the button is clicked.
If I press the button 2 times, then the second animation turns on, but if the first one has not played to the end, then it continues to work in parallel with the second one until it loses.
Question: how can I make sure that the next time the animation is turned on, the previous one does not work, and if I do not press the button a second time, then the first animation will play to the end?

Answer 1

You can do it like this:
1. Introduce a variable, say isAnimation = false;
2. When the button is clicked, check the state of this variable: if(!isAnimation) playMyAnimation();
3. In the playMyAnimation function, immediately assign this variable to true;
4. jquery animate has a complete method that is called when the animation is over. Accordingly, in this method, we assign isAnimation = false again.
5. Profit!
Well, an example: jsfiddle.net/wzdmb/

Answer 2

Use the stop() function:
jquery-docs.ru/effects/stop/

$("#go").click(function(){
      $(".block").stop().animate({left: '+=100px'}, 2000);
    });

Answer 3

api.jquery.com/finish/