jQuery Easing 使用方法及其圖解
Time:2014/10/07 09:42:45 Click:
從jQuery API 文檔中可以知道(dào)，jQuery自界說(shuō)動畫的函數.animate( properties [, duration] [, easing] [, complete] )有四個參數：
- properties：一組包括作爲動畫屬性以及終值的樣(yàng)式屬性以及及其值的糾合
- duration(可選)：動畫執行時(shí)間，其值可所以三種(zhǒng)預定速率之一的字符串("slow", "normal", or "fast")或者暗示動畫時(shí)長(cháng)的毫秒數值(如：1000)
- easing(可選)：要使用的過(guò)渡效果的名稱，如："linear" 或者"swing"
- complete(可選)：在動畫完成(chéng)時(shí)執行的函數
此中參數easing默許有兩(liǎng)個效果："linear"以及"swing"，若是必要更多效果就(jiù)要插件支撐了，jQuery Easing Plugin提供了像"easeOutExpo"、"easeOutBounce"等30多種(zhǒng)效果，年夜家可以點擊這(zhè)裡(lǐ)去看每一一種(zhǒng)easing的演示效果，下面(miàn)具體先容下其使用方式及每一種(zhǒng)easing的曲線圖。
jQuery easing 使用方式
起(qǐ)首，項目中若是必要使用特殊的動畫效果，則必要在引入jQuery以後(hòu)引入jquery.easing.1.3.js
- <scripttype="text/javascript"src="static/js/jquery-1.8.3.js"></script>
- <scripttype="text/javascript"src="static/js/jquery.easing.1.3.js"></script>
引入以後(hòu)，easing參數可選的值就(jiù)有如下32種(zhǒng)：
- 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
固然一般一個項目中不成(chéng)能(néng)會(huì)用到這(zhè)麼(me)多效果，爲了削減代碼冗餘，需要時(shí)可以不消引入整個jquery.easing.1.3.js，咱們可以隻把咱們必要的幾種(zhǒng)easing放入Javascript文件中，如項目中隻用到"easeOutExpo"以及"easeOutBounce"兩(liǎng)種(zhǒng)效果，隻必要下面(miàn)的代碼就(jiù)能(néng)夠了
- 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;
- } elseif (t < (2/2.75)) {
- return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
- } elseif (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;
- }
- },
- });
使用jQuery自界說(shuō)動畫函數animate來指定easing效果，如自界說(shuō)一種(zhǒng)類彈簧效果的動畫：
- $(myElement).animate({
- top: 500,
- opacity: 1
- }, 1000, 'easeOutBounce');
值患上一提的是jQuery 1.4版本中對(duì)animate()方式，easing的方式進(jìn)行了擴大，支撐爲每一個屬性指定easing方式，具體請參考這(zhè)裡(lǐ)，如：
- $(myElement).animate({
- left: [500, 'swing'],
- top: [200, 'easeOutBounce']
- });
- $(myElement).animate({
- left: 500,
- top: 200
- }, {
- specialEasing: {
- left: 'swing',
- top: 'easeOutBounce'
- }
- });
使用jQuery内置動畫函數如slideUp()、slideDown()等來指定easing效果，如下兩(liǎng)種(zhǒng)方式均可以：
- $(myElement).slideUp(1000, method, callback});
- $(myElement).slideUp({
- duration: 1000,
- easing: method,
- complete: callback
- });
jQuery easing 圖解
如下圖解可讓你更易理解每一一種(zhǒng)easing的效果
 |
 |
 |
 |
 |
 |
| 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 |
尚狐網絡-緻力于爲四川成(chéng)都(dōu)提供最專業的網站建設服務。
