Easings


Easing functions specify the speed at which an animation progresses at different points within the animation. jQuery core ships with two easings: linear, which progresses at a constant pace throughout the animation, and swing (jQuery core's default easing), which progresses slightly slower at the beginning and end of the animation than it does in the middle of the animation. jQuery UI provides several additional easing functions, ranging from variations on the swing behavior to customized effects such as bouncing.

Some easings will result in negative values during the animation. Depending on the properties that are being animated, the actual value may be clamped at zero. For example, you can animate left to a negative value, but you cannot animate height or opacity to a negative value.

The best way to understand how an easing will affect an animation is to see the equation graphed over time. See below for a graph of all animations available in jQuery UI.