How to slow down and stop current jQuery animation?

Question

Hi! jQuery question. I have animated .block moving to the right for 5000px.

$(".block").animate({"left": "+=5000px"}, 2000, 'linear');

What I need is to slowly stop this animation after the click:

('#clickme').click(function() {
 // ... stop $(".block") animation, not immediately, but with some easing
});

Is this possible with jQuery? Any suggestions will be appreciated.

Answer 1

You can immediately stop an animation with the .stop() function:

http://api.jquery.com/stop/

It does a hard stop, however. If you are animating, it will be a pretty abrupt stop.

Answer 2

I'd tackle this by stopping the animation when the user clicks the stop trigger, then start a new animation that gives the illusion of an eased stop. Here's an example: http://jsfiddle.net/brianflanagan/BsQvh/ The trick is tweaking the settings of the second animation so things work smoothly. You'll want to marry the duration and the distance so it blends with the original animation's pace.