How to move a block in jquery so that when clicked multiple times it linearly accelerates?

Question

JavaScript

Let's say there is a block of 20x20 pixels and a button to move to the left. With a simple view like:

$("#button").click(function(){
    $("#block").animate({ left: "+=20" }, 1000);
})

If the button is pressed 2 times in a row, then the second-third-itp presses will be queued and the block will move evenly based on the specified interval. And how to make it so that clicks with a relatively short interval (while the first animation is running) can overlap each other and move the block faster. I press the button, the block starts moving these 20 pixels, I press 2 more times, the script sums up and starts the speed at 60 pixels for 1000 milliseconds.

The question is specifically for jikverists, since I roughly understand how it will look on pure js.
Unfortunately, I don’t know jquery (manuals are not knowledge), that is, my attempts to write a script will result in an unreasonable use of resources (extra code, extra calls).
Guru, call back! Thanks

Answer 1

Give the animation to css, this is how you can do
codepen.io/iiil/pen/ahIxC
In theory, you can still make an adjustment for the time between clicks, then there will be no jerks. Take the time of the click, compare it with the time of the previous click (starting from the second one) and subtract this time from the animation time.

Answer 2

Stop the current animation $("#foo").stop()
And start the animation again at the new speed.

Answer 3

You can stop the previous operation (.stop()) and start a new, faster one.
You can also move the block wrapper with the next click, then the total speed of the main block will be greater.