CODEWITHSUNDEEP
javascriptjqueryanimationraphael
Ajax3.14
Ajax3.14

Reputation: 1695

Adding play/pause in animation

I have a animation of moving blocks but I would like to add feature where the user has the capablity to interupt the animation in middle like pause and then start from there.

I see in raphael reference has two methods .stop() and .pause()

but I am not clear how to implement it.

may I know how to use it in my case. please look at the http://jsfiddle.net/kevindivdbyzero/95tmh/:

Upvotes: 0

Views: 179

Answers (1)

Anna
Anna

Reputation: 554

When you want to pause it you can use .stop() but save the amount the block has moved. Then when you resume the animation subtract the total amount it has to move minus the amount it already moved.

So, if you are moving the block 100 pixels and they pause it at 50 pixels, then when they resume it animate only 50 pixels this time. They can then again pause it 20 pixels in and you'd have 30 pixels left. Keep doing this until the animation is complete and then trigger that the block finished animating. You'll just need to store some more information.

Upvotes: 1

Related Questions