How to Use jQuery animate easing, jqueryeasing

How to Use jQuery animate easing, jqueryeasing

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 serve as animation attributes and final values.
  Duration (optional): animation execution time, which can be a string of one of the three predefined speeds ("slow", "normal", or "fast ") or a millisecond value (for example, 1000) indicating the animation duration)
• Easing (optional): name of the transition effect to be used, for example, "linear" or "swing"
• Complete (optional): The function executed when the animation is complete.

The easing parameter has two effects by default: "linear" and "swing". If more effects are needed, the plug-in is supported, jQuery EasingPlugin provides over 30 effects, such as "easeOutExpo" and "easeOutBounce". You can click here to see the demonstration effects of each easing, the following describes in detail how to use and the graph of each easing. JQuery easing usage first, if special animation effects are required in the project, jQuery. easing.1.3.js needs to be introduced after jquery is introduced.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script><script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> 

After introduction, the easing parameter has the following 32 optional values:

 

Of course, it is generally impossible to use so many effects in a project. To reduce code redundancy, you do not need to introduce the entire jquery. easing.1.3.js, we can just put the easing we need into a Javascript file. For example, we only use the "easeOutExpo" and "easeOutBounce" effects in the project. We only need the following code.

 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 + .75) + 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 the easing effect. For example, you can customize an animation with spring effects:

 

 $(myElement).animate({      top: 500,      opacity: 1  }, 1000, 'easeOutBounce');

 

It is worth mentioning that in jQuery 1.4, the animate () method and easing method are extended. You can specify the easing method for each attribute. For details, see here, for example:

// The first method $ (myElement ). animate ({left: [500, 'swing '], top: [200, 'easeoutbounce']}); // method 2 $ (myElement ). animate ({left: 500, top: 200}, {specialEasing: {left: 'swing ', top: 'easeoutbounce '}});

Use jQuery built-in animation functions such as slideUp () and slideDown () to specify the easing effect. You can use either of the following methods:

 

 $(myElement).slideUp(1000, method, callback});  $(myElement).slideUp({      duration: 1000,       easing: method,       complete: callback  });