jquery animation Effects Plugin

From the jquery API documentation, you can learn about the functions of jquery custom animations. Animate (properties [, duration] [, easing] [, complete]) has four parameters:

Properties: A set of style properties and their values that are included as animated and final values
Duration (optional): Animation execution time, whose value can be a string of one of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)
Easing (optional): The name of the transition effect to use, such as: "Linear" or "swing"
Complete (optional): A function that executes when the animation finishes
The parameter easing default has two effects: "Linear" and "swing", if need more effect will plug-in support, jQuery easing plugin provide like "Easeoutexpo", "easeoutbounce" and so on more than 30 kinds of effects, You can click here to see each kind of easing demonstration effect, the following detailed introduction of its use and each kind of easing graph.

How to use jQuery easing
First, if you need to use a special animation effect in your project, you need to introduce jquery.easing.1.3.js after the introduction of jquery
<</span>script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.8.3.js" ></</span >script>
<</span>script type= "Text/javascript" src= "http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js "></</span>script>

After introduction, the easing parameter can be selected in the following 32 types of values:

Linear
Swing
Easeinquad
Easeoutquad
Easeinoutquad
Easeincubic
Easeoutcubic
Easeinoutcubic
Easeinquart
Easeoutquart
Easeinoutquart
Easeinquint
Easeoutquint
Easeinoutquint
Easeinexpo
Easeoutexpo
Easeinoutexpo
Easeinsine
Easeoutsine
Easeinoutsine
Easeincirc
Easeoutcirc
Easeinoutcirc
Easeinelastic
Easeoutelastic
Easeinoutelastic
Easeinback
Easeoutback
Easeinoutback
Easeinbounce
Easeoutbounce
Easeinoutbounce
Of course, it is not possible to use so many effects in a project, in order to reduce the code redundancy, if necessary without introducing the entire jquery.easing.1.3.js, we can just put a few of the easing we need into the JavaScript file, such as only used in the project " Easeoutexpo "and" easeoutbounce "two effects, just need the following code to be able to
Jquery.extend (Jquery.easing,
{
Easeoutexpo:function (x, T, B, C, D) {
Return (T==d)? B+C:C * (-math.pow (2, -10 * t/d) + 1) + B;
},
Easeoutbounce:function (x, T, B, C, D) {
if ((T/=d) < (1/2.75)) {
Return c* (7.5625*t*t) + B;
} else if (T < (2/2.75)) {
Return c* (7.5625* (t-= (1.5/2.75)) *t +.) + B;
} else if (T < (2.5/2.75)) {
Return c* (7.5625* (t-= (2.25/2.75)) *t +. 9375) + b;
} else {
Return c* (7.5625* (t-= (2.625/2.75)) *t +. 984375) + b;
}
},
});

Use the jquery Custom animation function animate to specify easing effects, such as customizing the animation of a class spring effect:

$ (myelement). Animate ({
TOP:500,
Opacity:1
}, +, ' easeoutbounce ');
It is worth mentioning that the animate () method is extended in the jquery 1.4 release, which supports specifying the easing method for each property, as detailed in this example:

$ (myelement). Animate ({
Left: [$, ' swing '],
Top: [$, ' easeoutbounce ']
});
You can also use another notation:

$ (myelement). Animate ({
LEFT:500,
top:200
}, {
Specialeasing: {
Left: ' Swing ',
Top: ' Easeoutbounce '
}
});

Using jquery built-in animation functions such as Slideup (), Slidedown (), and so on to specify the easing effect, the following two methods are available:

$ (myelement). Slideup (+, Method, callback});
$ (myelement). Slideup ({
duration:1000,
Easing:method,
Complete:callback
});

JQuery easing diagram
The solution will make it easier for you to understand the effects of each kind of easing.

2. swing
7.easeOutCubic	8.easeInOutCubic	9. Easeinquart	10.easeOutQuart	11.easeInOutQuart	12.easeinquint
13.easeOutQuint	14.easeInOutQuint	Easeinexpo.	16.easeOutExpo	17.easeInOutExpo	18. Easeinsine
19.easeOutSine	20.easeInOutSine	Easeincirc.	22.easeOutCirc	23.easeInOutCirc	24.easeinelastic
25.easeOutElastic	26.easeInOutElastic	Easeinback.	28.easeOutBack	29.easeInOutBack	30.easeinbounce
		 
31.easeOutBounce	32.easeInOutBounce

jquery animation Effects Plugin