How to change an running animation without stop

Hey forum members,

first, I apologize for my bad english.

I hope someone can help me.
So, like discriped in the title I want to change an running animation.
For example:
Everytime I click on a button, a div should animate 50px to the right in 1000ms.
When I click on the button during the animation is running, the animation should go to 100px in 2000ms, without stop.

I don't know if its possible, someone knows the answer.

I made a little demo with the stop function:
DEMO

I hope you can understand what I wrote.

Thanks a lot for any help!

• Topic Participants

• mongoviech