The use method of jQuery easing and its illustration

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 you introduce jquery [HTML]View Plaincopy

1. <script type="Text/javascript" src="Http://code.jquery.com/jquery-1.8.3.js"> </Script>
2. <script type="Text/javascript" src= "http://gsgd.co.uk/sandbox/jquery/easing/ Jquery.easing.1.3.js "></script>

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

1. Linear
2. Swing
3. Easeinquad
4. Easeoutquad
5. Easeinoutquad
6. Easeincubic
7. Easeoutcubic
8. Easeinoutcubic
9. Easeinquart
10. Easeoutquart
11. Easeinoutquart
12. Easeinquint
13. Easeoutquint
14. Easeinoutquint
15. Easeinexpo
16. Easeoutexpo
17. Easeinoutexpo
18. Easeinsine
19. Easeoutsine
20. Easeinoutsine
21. Easeincirc
22. Easeoutcirc
23. Easeinoutcirc
24. Easeinelastic
25. Easeoutelastic
26. Easeinoutelastic
27. Easeinback
28. Easeoutback
29. Easeinoutback
30. Easeinbounce
31. Easeoutbounce
32. 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 [JavaScript]View Plaincopy

2. Jquery.extend (Jquery.easing,
4. {
6. Easeoutexpo: function (x, T, B, C, d) {
8. return (T==d) b+c:c * (-math.pow (2, -10 * t/d) + 1) + B;
10. },
12. Easeoutbounce: function (x, T, B, C, d) {
14. if ((T/=d) < (1/2.75)) {
16. return c* (7.5625*t*t) + B;
18. } Else if (T < (2/2.75)) {
20. return c* (7.5625* (t-= (1.5/2.75)) *t +.) + B;
22. } Else if (T < (2.5/2.75)) {
24. return c* (7.5625* (t-= (2.25/2.75)) *t +. 9375) + b;
26. } Else {
28. return c* (7.5625* (t-= (2.625/2.75)) *t +. 984375) + b;
30. }
32. },
34. });

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

[JavaScript]View Plaincopy

1. $ (myelement). Animate ({
2. TOP:500,
3. Opacity:1
4. }, +, ' 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:

[JavaScript]View Plaincopy

1. $ (myelement). Animate ({
2. Left: [$, ' swing '],
3. Top: [$, ' easeoutbounce ']
4. });

You can also use another notation:

[JavaScript]View Plaincopy

1. $ (myelement). Animate ({
2. LEFT:500,
3. top:200
4. }, {
5. Specialeasing: {
6. Left: ' Swing ',
7. Top: ' easeoutbounce '
8. }
9. });

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

[JavaScript]View Plaincopy

1. $ (myelement). Slideup (+, Method, callback});
2. $ (myelement). Slideup ({
3. duration:1000,
4. Easing:method,
5. Complete:callback
6. });

JQuery easing illustrations to make it easier for you to understand the effects of each of the easing

1. Linear	2. Swing	3. Easeinquad	4. Easeoutquad	5. Easeinoutquad	6. Easeincubic
7. Easeoutcubic	8. Easeinoutcubic	9. Easeinquart	Ten. Easeoutquart	Easeinoutquart.	Easeinquint.
Easeoutquint.	Easeinoutquint.	Easeinexpo.	Easeoutexpo.	Easeinoutexpo.	Easeinsine.
Easeoutsine.	Easeinoutsine.	Easeincirc.	Easeoutcirc.	Easeinoutcirc.	Easeinelastic.
Easeoutelastic.	Easeinoutelastic.	Easeinback.	Easeoutback.	Easeinoutback.	Easeinbounce.
Easeoutbounce.	Easeinoutbounce.

Ext.: http://blog.csdn.net/xiaolongtotop/article/details/8309635

The use method of jQuery easing and its illustration