Using Custom Easing Methods for Effects - J Query

Problem
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.

Solution

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:

Discussion

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:

fraction

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

elapsed

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

attrStart

The beginning value of the CSS attribute that is being animated

attrDelta

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

duration

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


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

J Query Topics