The animation of jquery+easing slow motion used in the front-end of website construction

Web site construction of the front-end personnel to use jquery to achieve the animation is simple, but to achieve a more cool effect also need plug-in to help, easing is a help jquery to achieve slow animation plug-in, after trial, the effect is very good!

Download the plugin: jquery.easing.1.3.js jquery.easing.compatibility.js

The plug-in beautification after the layout is about 130 lines, compressed after smaller. This plugin makes up for the lack of animation effect in jquery, it is more powerful animation effect.

The x-axis represents time, and the y-axis represents the change in animation effects. Looking at these curve changes, it is more advantageous to grasp the effect of this plugin.

Plugin Support station: http://gsgd.co.uk/sandbox/jquery/easing/

Effect Demo site: http://james.padolsey.com/demos/jquery/easing/

We can see the performance of the performance demonstration site, or through the visual effects of coordinate labeling to understand the specific trajectory of its operation. For example:

Common parameters:

• Linear
• Swing
• Jswing
• Easeinquad
• Easeoutquad
• Easeinoutquad
• Easeincubic
• Easeoutcubic
• Easeinoutcubic
• Easeinquart
• Easeoutquart
• Easeinoutquart
• Easeinquint
• Easeoutquint
• Easeinoutquint
• Easeinsine
• Easeoutsine
• Easeinoutsine
• Easeinexpo
• Easeoutexpo
• Easeinoutexpo
• Easeincirc
• Easeoutcirc
• Easeinoutcirc
• Easeinelastic
• Easeoutelastic
• Easeinoutelastic
• Easeinback
• Easeoutback
• Easeinoutback
• Easeinbounce
• Easeoutbounce
• Easeinoutbounce

Method Description:

• DEF: default Mode setting
• Swing: Load By default
• Quad: Two-time square easing (t)
• Cubic: Three-time Square easing
• Quart: Four-time Square easing
• Quint: Five-time Square easing
• Sine: sinusoidal easing
• Expo: exponential curve easing
• CIRC: Easing of circular curves
• Elastic: Exponential attenuation of sinusoidal easing
• Back: three-square easing over range
• Bounce: Exponential attenuation of rebound easing

Description of In, out, InOut:

• Easein: acceleration easing;
• Easeout: slow speed reduction;
• EaseInOut: First acceleration to 50%, then reduce the speed to complete the animation.

How to apply:

Slideup|slidedown|slidetoggle|fadein|fadeout|fadetoggle

$ (Element). Slideup (Duration,easing,[callback]);

FadeTo

$ (Element). FadeTo (Duration,opacity,easing,[callback]);

Animate

$ (Element). Animate ({properties},duration,easing,callback);

The jquery1.4+ version can also:

$ (Element). Animate ({left:[100, ' Swing '],top:[100, ' easeoutbounce '});

Or

JQuery (myelement). Animate ({left:100,top:100},{specialeasing:{left: ' Swing ', Top: ' Easeoutbounce '}});

Refer to the Jquery1.4+ API for more details.

Simple example:

2. <script type="Text/javascript" language="javascript" src="Js/jquery.js"> </Script>
4. <script type="Text/javascript" language="javascript" src="Js/easing.js"> </Script>
6. <script language="javascript" type="Text/javascript">
8. $ (document). Ready (function () {
10. $ ("#xxxx"). Stop (True,false). Animate ({left: -320},1500, ' easeoutelastic ');
12. })
14. </Script>

Get started with jquery easing

Method 1, set the jquery default animation effect

1. JQuery.easing.def = "method";//such as: Easeoutexpo

Method 2, jquery default animation

Supports toggle (), Slideup (), Slidedown (), show (), Hide (), and other jquery-built animation effects

such as the following code:

1. $ (Element). Slideup ({
3. duration:1000,
5. Easing:method,
7. Complete:callback});

Method 3, use jquery to customize the animation function. Animate ()

JQuery's. Animate () is a function of custom animation, as stated above, with four parameters, where easing's parameter is the name of the method (such as Easeoutexpo) in which we animate the effect. The simplest way to use web site construction is to:

2. $ (myelement). Animate ({
6. LEFT:500,
10. top:500
14. }, ' Easeoutexpo ');
18. James Padolsey has modified the animate function of jQuery1.3.2 to extend:
24. JQuery.fn.animate = (function (_anim) {
28. var jqeasing = jquery.easing;
32. return function (prop, duration, easing, callback) {
36. var props = {}, Optall, I, haseaser = false;
40. For (i in prop) {
44. if (Jquery.isarray (Prop[i])) {
48. Haseaser = true;
52. Props[i] = prop[i][1];
56. Prop[i] = prop[i][0];
60. }
64. }
68. opt = jquery.speed (duration, easing, callback);
72. if (Haseaser) {
76. Opt.step = (function (_step) {
80. return function (now, FX) {
84. var end = Fx.end, easefn;
88. if ( easefn = Props[fx.prop]) {
92. Fx.now = Jqeasing[easefn] (now/end, now, 0, end, end);
96. }
100. _step && _step.call (Fx.elem, Fx.now, FX);
104. };
108. }) (Opt.step);
112. }
116. optopt.complete = Opt.old | | callback | | jquery.isfunction (easing) && easing;
120. Return _anim.call (this, prop, opt);
124. };
128. }) (jQuery.fn.animate);

This approach has been introduced in jQuery1.4, so there is no need to add the animate () extension of jquery in jQuery1.4, so we can use the following more convenient code:

1. $ (myelement). Animate ({
3. LEFT:500,
5. Top: [$, ' easeoutbounce ']
7. }, +, ' swing ');

jQuery1.4 Animate () +easing

1. JQuery (myelement). Animate ({
3. Left: [$, ' swing '],
5. Top: [$, ' easeoutbounce ']
7. });
9. Or:
11. JQuery (myelement). Animate ({
13. LEFT:500,
15. top:200
17. }, {
19. Specialeasing: {
21. Left: ' Swing ',
23. Top: ' Easeoutbounce '
25. }
27. });

The animation of jquery+easing slow motion used in the front-end of website construction