Can I cancel the animation of the <span> block when I click on the <div> button?

 setInterval(function() { $("span").animate({ height: "90%" }, 1000).animate({ height: "30px" }, 1000); }); 
 span { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border: 1px solid #000; } div { position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; width: 50px; height: 50px; cursor: pointer; background: #f00; } 
 <div></div> <span></span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  • And why do you need setInterval? - Chad Nov.
  • @ Chad to repeat the animation - Grundy
  • For some reason it seems to me that for these purposes it is better to use kalbek to complete the animation, otherwise after a while there will be "artifacts" due to the overlay of animations - Chad
  • 2
    Yes, also read about the management of animation api.jquery.com/category/effects/custom-effects , it is better to use standard mechanisms than to create bicycles through a timer - Chad

2 answers 2

First, use clearInterval() to remove repetition. Second, specify the time for the interval, totally equal to the entire animation. And third, jQuery has a stop () or finish () function to stop the animation.

 var animate = function() { $("span").animate({ height: "90%" }, 1000).animate({ height: "30px" }, 1000); }; animate(); window.intervalId = setInterval(animate, 2000); $('div').on('click', function(){ $("span").stop(true, false); clearInterval(window.intervalId); }); 
 span { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border: 1px solid #000; } div { position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; width: 50px; height: 50px; cursor: pointer; background: #f00; } 
 <div></div> <span></span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    1. You need to make a delay between repetitions of the interval: at the moment you are adding a “wild” number of animations to the queue for execution every second). The most logical in this situation is to use 2000 milliseconds.
    2. It is necessary to save the id interval to be set.
    3. When clicking on a block, you need to stop the interval by calling clearInterval(id); .

     var id = setInterval(function() { $("span").animate({ height: "90%" }, 1000).animate({ height: "30px" }, 1000); }, 2000); $('div').on("click", function() { clearInterval(id); }); 
     span { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border: 1px solid #000; } div { position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; width: 50px; height: 50px; cursor: pointer; background: #f00; } 
     <div></div> <span></span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    You can also do without the use of setInterval , which in this case looks like a dubious solution, and start the next iteration of the animation upon completion of the previous one:

     var $element = $('span'); function animation() { $element.animate({ height: "90%" }, 1000).animate({ height: "30px" }, 1000, animation); } animation(); $('div').on("click", function() { $element.stop(true); }); 
     span { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border: 1px solid #000; } div { position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; width: 50px; height: 50px; cursor: pointer; background: #f00; } 
     <div></div> <span></span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    • this is not exactly an instant cancel animation. it will still pass if you get to the beginning of the interval - Grundy
    • one
      @Grundy here, let's face it, I thought a little about the author, deciding that stopping the current animation iteration halfway is a bad thing. - Regent Nov.
    • By the way, after editing, the meaning was lost and it does not seem at all that you need to cut off everything :-) - Grundy
    • @Grundy when I edited the question - I did not try to distort its meaning, and the word "instant" as it was in the title, so it remained there. Anyway, I added to the answer a variant with an instant stop and without a crutch in the form of setInterval -a. - Regent
    • It looks like it was my first reading impression :-) And I looked at what had changed and the truth was the same - Grundy