It is necessary when vmousedown , so that the height of the block increases, while vmouseup stops growing. This is implemented by me so

 var intervalTimer1 = 0; $(document).on("vmousedown", "#btn", function() { var rost = 0; intervalTimer1 = setInterval(function() { rost++; console.log("rost =" + rost); $('#planka').css("height", rost + "px"); }); }); $(document).on("vmouseup", "#btn", function() { clearInterval(intervalTimer1); intervalTimer1 = 0; });

Everything works, but not quite smoothly, sometimes it jerks. Using the animate method animate better, but still, sometimes with jerking, it is better to optimize it.

Here is an example

  • It can be done through css animation, and when released, what would be the animation-play-state added and then the height will remain current, but the maximum height will be limited, does that suit you? - Mr_Epic
  • var rost = 0; Take out of the function, you are twitching because growth always starts from scratch. - Jean-Claude

2 answers 2

Thanks @Qwertiy - looked more about requestAnimationFrame and made you a nice example of smooth animation. One second after the launch, the process ends and the number of added divs is displayed, and 60 frames / iterations are obtained in a second.

 $(function() { var globalID; function repeatOften() { $("<div />").appendTo("#divs"); globalID = requestAnimationFrame(repeatOften); } $("#stop").on("click", function() { cancelAnimationFrame(globalID); }); $("#start").on("click", function() { globalID = requestAnimationFrame(repeatOften) setTimeout(function() { cancelAnimationFrame(globalID); $('#res').append('<div>stop</div>'); $('#res').append('<div>' + $('#divs div').length + '</div>'); }, 1000); }); }); 
 #divs div { width: 10px; height: 10px; background: orange; float: left; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="start">start</button> <button id="stop">stop</button> <div id="res"></div> <div id="divs"></div>

    Perform a timer every 4ms is very suboptimal. In addition, it is wrong to count on the frequency of calling this timer. The timer interval should be changed to get 60 frames per second. Better yet, use requestAnimationFrame .