Jquery .animate() slow down at end

I have a jQuery function like so:开发者_JS百科

$(this).animate({ width:100+'px' }, 300);

How can I make the animation slow down towards the end? Say like 500 milliseconds?

You will need to use Easing

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

jQuery Ui Easing Demo

So your example would be like:

$(this).animate({ width:100+'px' }, 300, "someEasingFunction");

I believe you are looking for a certain easing effect. Have a look at the jQuery UI advanced easing effects. By default, jQuery only comes with swing and linear.

jQuery API says:

.animate( properties, [ duration ], [ easing ], [ complete ] )

• properties: A map of CSS properties that the animation will move toward.

• duration: A string or number determining how long the animation will run.

• easing: A string indicating which easing function to use for the transition.

• complete: A function to call once the animation is complete.

An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

So your implementation already slows down to the end of animation, if you'd like more control - use UI animation plugins