Talking about the specific usage method of jQuery animate easing of recommendation

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

&8226;The properties:1 group contains a collection of style attributes and their values as animation attributes and end values

&8226;duration (optional): The animation execution time, which can be a string of one of three preset speeds ("slow", "normal", "or") or a millisecond value representing the animation duration (for example, 1000)

&8226;easing (optional): The name of the transition effect to be used, such as "linear" or "swing"

&8226;complete (optional): Functions executed when the animation is complete

The parameter easing has two effects by default: linear and swing. If more effects are needed, plug-in support is needed. jQuery Easing Plugin provides more than 30 effects, such as easeOutExpo and easeOutBounce. You can click here to see the demonstration effect of each easing. The following details how it is used and the curve diagram of each easing.

Usage of jQuery easing

First, if you need to use special animation effects in your project, you need to introduce jquery.easing.1.3.js 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:

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 impossible to use so many effects in a general project. In order to reduce code redundancy, we can put only a few of the easings we need into the Javascript file instead of introducing the entire jquery.easing.1.3.js if necessary. For example, only two effects of "easeOutExpo" and "easeOutBounce" are used in the project, just the following code is needed.

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, such as an animation that customizes a spring effect:

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

It is worth mentioning that the animate () method, easing's method, has been extended in version jQuery 1.4 to support specifying the easing method for each property, as detailed here, such as:

// No. 1 Seed Writing 
 $(myElement).animate({ 
  left: [500, 'swing'], 
  top: [200, 'easeOutBounce'] 
}); 
// No. 2 Seed Writing 
 $(myElement).animate({ 
  left: 500, 
  top: 200 
}, { 
  specialEasing: { 
    left: 'swing', 
    top: 'easeOutBounce' 
  } 
});

Use jQuery built-in animation functions such as slideUp (), slideDown () to specify the easing effect, either of the following can be used:

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