Using Custom Easing Methods for Effects - J Query

jQuery comes with only two built-in easing functions: swing and linear. The default is swing. If we want to make our animations a little more interesting, then we might want to use a different easing function—this could give us a bounce animation, or elastic, or perhaps just an animation that slows down as it’s coming to its end.


By first including jquery.easing.1.3.js after we include the jQuery library, we can now make use of any one of the 31 new easing functions:


By including the easing library, we can specify a large range of values in the easing property in the options parameter. The animate method also supports passing easing as the third parameter, so the preceding solution could be written as follows:

The preceding example is the equation for the easeInQuad easing. All easing functions take five parameters:


The current position of the animation, as measured in time between 0 (the beginning of the animation) and 1 (the end of the animation)


The number of milliseconds that have passed since the beginning of the animation (seldom used)


The beginning value of the CSS attribute that is being animated


The difference between the start and end values of the CSS attribute that is being Animated


The total number of milliseconds that will pass during the animation (seldom used)

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

J Query Topics