JQuery animate easing using the method of graphics and text _jquery

As you can see from the jquery API documentation, the jquery custom animation function. Animate (properties [, duration] [, easing] [, complete]) has four parameters:

Properties: A set of style attributes and their values that are included as animation properties and end values

Duration (optional): Animation execution time, whose value can be one of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value representing the length of the animation (for example: 1000)

easing (optional): The name of the transition effect to use, such as: "Linear" or "swing"

Complete (optional): Functions that are executed when the animation completes

Where the parameter easing default has two effects: "Linear" and "swing", if you need more results to the plug-in support, JQuery easing plugin provides such as "Easeoutexpo", "easeoutbounce" and more than 30 kinds of effects, You can click here to see the results of each of the easing, the following details of its use and each of the easing curve.

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 you introduce jquery

<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.8.3.js" ></script>

After introduction, the optional value of the easing parameter has the following 32 kinds:

1. Linear
2. Swing
3. Easeinquad
4. Easeoutquad
5. Easeinoutquad
6. Easeincubic
7. Easeoutcubic
8. Easeinoutcubic
9. 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, in general a project can not use so many effects, in order to reduce code redundancy, if necessary without introducing the entire jquery.easing.1.3.js, we can just put the several easing we need into JavaScript files, such as the project only use " Easeoutexpo "and" easeoutbounce "two effects, only need the following code is OK

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)) { 
R Eturn 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 the easing effect, such as customizing an animation of a spring-like effect:

$ (myelement). Animate ({ 
top:500, 
opacity:1 

It is worth mentioning that the jquery 1.4 version of the Animate () method, the easing method has been extended to support the designation of easing methods for each attribute, please refer to here, for details, such as:

The first type
is $ (myelement). Animate ({left 
: [+, ' swing '], top 
: [MB, ' easeoutbounce '] 
}); 
The second way of writing
$ (myelement). Animate ({ 
left:500, 
top:200 
}, { 
specialeasing: {left 
: ' Swing ', Top 
: ' Easeoutbounce ' 
} 

Using the 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 (1000, Method, callback}); 
$ (myelement). Slideup ({ 
duration:1000, 
easing:method, 
complete:callback 

JQuery easing diagram

The following illustration will make it easier for you to understand the effects of each of the easing

The above is a small set to introduce the jquery animate easing use method of the relevant knowledge, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!