How to slow down and stop current jQuery animation?

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.

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.

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.

I know this is old, but here's how I would do this:

var stopping = false;
var lastNow = 0;
$(".block").animate({left:"+=5000px"}, {
    step: function(now){ 
        if (stopping) {
            var delta = lastNow - now;
            $(this).stop().animate({ left : "+=" delta * 2 }, 1000, "easeInOutQuad");
            stopping = false;
        }
        lastNow = now;
    }});

To stop, set stopping to true