Use of 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.

< </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) {R Eturn (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 use a different kind of 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.

If you use JQuery 1.4 or more, you can do the following:

$ (Element). Animate ({  width:[200, ' Easeinoutback '),  height:[200, ' Easeoutback ']},1000);

Transferred from: http://blog.sina.com.cn/s/blog_70a3539f0102v8az.html

Use of jQuery easing