Как передвинуть блок на jquery так, чтобы при многоразовом нажатии он линейно ускорялся?

Question

[NewTypes]

Допустим, есть блок 20x20 пикселей и кнопка сдвинуть влево. С простым видом вроде:

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

Если 2 раза подряд нажать на кнопку, то второе-третье-итп нажатия встанут в очередь и блок будет смещаться равномерно на основе заданного интервала. А как сделать так, чтобы нажатия с относительно коротким промежутком (пока запущена первая анимация) могли наслаиваться друг на друга и сдвигать блок ускоряясь. Я жму кнопку, блок начинает двигаться эти 20 пикселей, я жму еще 2 раза, скрипт суммирует и запускает скорость в 60пикселей на 1000 милисекунд.

Вопрос конкретно джикверистам так как я примерно понимаю как это будет выглядеть на чистом js.
К сожалению, jquery я не знаю (мануалы это не знание), то есть мои попытки написать скрипт выльются в неразумное использование ресурсов (лишний код-лишние вызовы).
Гуру, отзовитесь! Спасибо

Comments

[Юрий Лобанов]

Где реакция? Чем не устроил ответ? Для чего вопрос задавали?

Answer 1

[Юрий Лобанов]

Отдайте анимацию на css, вот так примерно можно сделать
codepen.io/iiil/pen/ahIxC

По идее можно еще поправку на время между кликами делать, тогда рывков не будет. Брать время клика, сравнивать со временем предыдущего клика (начиная со второго) и это время вычитать из времени анимации.

Answer 2

[twixoff]

Остановить текущую анимацию $("#foo").stop()
И запустить анимацию вновь с новой скоростью.

Answer 3

[Сергей Волков]

Можно останавливать предыдущую операцию (.stop()) и запускать новую, более быструю.
Еще можно при следующем клике двигать блок-враппер, тогда суммарная скорость основного блока будет больше.