Easing
This page demonstrates how using different easing methods changes show / hide animation. All the menus on this page will use the slide animation with an animateSpeed of 1000 and a hideMenuDelay of 0
When animating in jQuery, there is a start point (A) and and end point (B) for every attribute being modified (height, for example). Easing explains how the animation travels from point A to B. linear is a constant rate. swing starts off slowly, speeds up in the middle, and ends slowly. This feels more natural than linear. There are jQuery plugins that will give additional easing functions, such as bounces (check out "easeOutBounce" below). These easing plugins add flair to simple animations.
Hover over the table cells below to see an example of a slide using the specified easing function.
| Linear |
| Swing |
Using George McGinley Smith's jQuery Easing Plugin many more options are available.
| easeInQuad |
| easeOutQuad |
| easeInOutQuad |
| easeInCubic |
| easeOutCubic |
| easeInOutCubic |
| easeInQuart |
| easeOutQuart |
| easeInOutQuart |
| easeInQuint |
| easeOutQuint |
| easeInOutQuint |
| easeInSine |
| easeOutSine |
| easeInOutSine |
| easeInExpo |
| easeOutExpo |
| easeInOutExpo |
| easeInCirc |
| easeOutCirc |
| easeInOutCirc |
| easeInElastic |
| easeOutElastic |
| easeInOutElastic |
| easeInBack |
| easeOutBack |
| easeInOutBack |
| easeInBounce |
| easeOutBounce |
| easeInOutBounce |