Discussion on the specific use method of jquery animate easing (recommended) _jquery

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 are included as animation properties and end values

Duration (optional): animation execution time, whose value can be one of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value representing the length of the animation (for example: 1000)

easing (optional): The name of the transition effect to use, such as: "Linear" or "swing"

Complete (optional): functions that are executed when the animation completes

Where the parameter easing default has two effects: "Linear" and "swing", if you need more results to the plug-in support, JQuery easing plugin provides such as "Easeoutexpo", "easeoutbounce" and more than 30 kinds of effects, You can click here to see the results of each of the easing, the following details of its use and each of the easing curve.

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

<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.8.3.js" ></script>

After introduction, the optional value of the easing parameter has the following 32 kinds:

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, in general a project can not use so many effects, in order to reduce code redundancy, if necessary without introducing the entire jquery.easing.1.3.js, we can just put the several easing we need into JavaScript files, such as the project only use " Easeoutexpo "and" easeoutbounce "two effects, only need the following code on it.

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 +.) + b; 
    } else if (T < (2.5/2.75)) { 
      R Eturn 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 customizing an animation of a spring-like effect:

$ (myelement). Animate ({ 
  top:500, 
  opacity:1 
}, 1000, ' easeoutbounce ');

It is worth mentioning that the jquery 1.4 version of the Animate () method, the easing method has been extended to support the designation of easing methods for each attribute, please refer to here, for details, such as:

The first type
 is $ (myelement). Animate ({left 
  : [+, ' swing '], top 
  : [MB, ' easeoutbounce '] 
}); 
The second way of writing
 $ (myelement). Animate ({ 
  left:500, 
  top:200 
}, { 
  specialeasing: {left 
    : ' Swing ', Top 
    : ' Easeoutbounce ' 
  } 
});

Using the 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 (1000, Method, callback}); 
$ (myelement). Slideup ({ 
  duration:1000,  
  easing:method,  
  complete:callback 

The above is a small series for everyone to talk about the specific use of jquery animate easing (recommended) All content, I hope that we support cloud Habitat Community ~