Jquery .animate() slow down at end

Question

I have a jQuery function like so:

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

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

Answer 1

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");