JQuery Intensive Tutorial--jquery easing

This article is Brother Lian IT Education Agency official HTML5 Training tutorials, the main introduction: JQuery Intensive Tutorial--jquery easing

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 to plug-in support, JQuery easing plugin provides like "Easeoutexpo", "easeoutbounce "such as 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

<script type= "Text/javascript" src= "http://code.jquery.com/jquery-... gt%3b <script type=" Text/javascript "src = "Http://gsgd.co.uk/sandbox/jque ... gt%3b

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 code redundancy, it is not necessary to introduce the entire Jquery.easing.1.3.js, we can just put a few of the easing we need into JavaScript files, such as the project only use the "Easeoutexpo" and "easeoutbounce" two effects, just need the following code 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 Intensive Tutorial--jquery easing