JQuery.animate () slows down at the end

Question

I have a jQuery function, for example:

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

How to make animation slower to the end? Tell me, how is 500 milliseconds?

Answer 1

You will need to use Loosen

The remaining .animate () parameter is a string calling the facilitating function. The attenuation function determines the speed with which the animation progresses at different points in the animation. The only implementation relief in jQuery's default library is called swing, and one that progresses at a constant pace is called linear. More easing features are available using plugins, most notably jQuery UI.

jQuery Ui Loosen Demo

So your example would look like this:

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

Answer 2

I believe that you are looking for a certain weakening effect. Take a look at jQuery UI's advanced easing effects. By default, jQuery comes only with swings and linear.

Answer 3

The jQuery API says:

. animate (properties, [duration], [attenuation], [completed])

• Properties: CSS properties map to which the animation will move.

• duration: a string or number that determines how long the animation will take.

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

• complete: function to call after the animation is complete.

The attenuation function determines the speed at which the animation advances at different points in the animation. The only facilitating implementations in the jQuery library are the default values ​​called swing, and one that progresses at a constant speed, called linear. Lighter features are available using plugins, most notably a set of jQuery user interfaces.

Thus, your implementation is already slowing down to the end of the animation, if you want more control - use user interface animation plugins