Detailed explanation of how to use jQuery animate easing with pictures and text

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

• properties: a set A collection containing style properties and their values ​​as animation properties and final values ​​

• duration (optional): animation execution time, whose value can be a string at one of three predetermined speeds ( "slow", "normal", or "fast") or a millisecond value indicating the animation duration (such as: 1000)

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

• complete (optional): function executed when the animation is completed

The parameter easing has two effects by default: "linear" and "swing", if you need more effects, you need plug-in support. jQuery Easing Plugin provides more than 30 effects such as "easeOutExpo", "easeOutBounce", etc. You can click here to see the demonstration effect of each easing, as detailed below Introduce its usage and the curve diagram of each easing.

jQuery easing usage

First of all, if you need to use special animation effects in your project, you need to introduce jquery.easing.1.3.js after introducing jQuery

<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 the 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 generally impossible to use so many effects in a project. In order to reduce code redundancy, it is not necessary to introduce the entire jquery.easing.1.3 when necessary. js, we can put only the several easings we need into the Javascript file. For example, if only the two effects "easeOutExpo" and "easeOutBounce" are used 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 jQuery's custom animation function animate to specify the easing effect, such as customizing a spring-like animation:

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

It is worth mentioning that the animate() method and easing method have been expanded in jQuery 1.4. , supports specifying the easing method for each attribute, please refer to here for details, such as:

//第一种写法
$(myElement).animate({ 
left: [500, 'swing'], 
top: [200, 'easeOutBounce'] 
}); 
//第二种写法
$(myElement).animate({ 
left: 500, 
top: 200 
}, { 
specialEasing: { 
left: 'swing', 
top: 'easeOutBounce'
} 
});

Use jQuery built-in animation functions such as slideUp(), slideDown(), etc. to specify the easing effect. The following two methods are available:

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

jQuery easing diagram

The following diagram can make it easier for you to understand the effect of each easing

The above The above is the relevant knowledge that the editor introduces to you in detail on how to use jQuery animate easing. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more detailed graphic and text explanations on how to use jQuery animate easing, please pay attention to the PHP Chinese website!