JQuery強化教程 —— jQuery Easing

標籤：jquery強化教程 —— jquery easing

 

從jQuery API 文檔中可以知道，jQuery自訂動畫的函數.animate( properties [, duration] [, easing] [, complete] )有四個參數：properties：一組包含作為動畫屬性和終值的樣式屬性和及其值的集合duration(可選)：動畫執行時間，其值可以是三種預定速度之一的字串("slow", "normal", or "fast")或表示動畫時間長度的毫秒數值(如：1000)easing(可選)：要使用的過渡效果的名稱，如："linear" 或"swing"complete(可選)：在動畫完成時執行的函數其中參數easing預設有兩個效果："linear"和"swing"，如果需要更多效果就要外掛程式支援了，jQuery Easing Plugin提供了像"easeOutExpo"、"easeOutBounce"等30多種效果，大家可以點擊這裡去看每一種easing的示範效果，下面詳細介紹下其使用方法及每種easing的曲線圖。 jQuery easing 使用方法首先，項目中如果需要使用特殊的動畫效果，則需要在引入jQuery之後引入jquery.easing.1.3.js<script type="text/javascript" src="http://code.jquery.com/jquery- ... gt%3B  <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jque ... gt%3B   引入之後，easing參數可選的值就有以下32種：linearswingeaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuinteaseInExpoeaseOutExpoeaseInOutExpoeaseInSineeaseOutSineeaseInOutSineeaseInCirceaseOutCirceaseInOutCirceaseInElasticeaseOutElasticeaseInOutElasticeaseInBackeaseOutBackeaseInOutBackeaseInBounceeaseOutBounceeaseInOutBounce當然一般一個項目中不可能會用到這麼多效果，為了減少代碼冗餘，必要時可以不用引入整個jquery.easing.1.3.js，我們可以只把我們需要的幾種easing放入Javascript檔案中，如項目中只用到"easeOutExpo"和"easeOutBounce"兩種效果，只需要下面的代碼就可以了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;          }      },  });   使用jQuery自訂動畫函數animate來指定easing效果，如自訂一種類彈簧效果的動畫：$(myElement).animate({      top: 500,      opacity: 1  }, 1000, ‘easeOutBounce‘);  值得一提的是jQuery 1.4版本中對animate()方法，easing的方法進行了擴充，支援為每個屬性指定easing方法，詳細請參考這裡，如： $(myElement).animate({      left: [500, ‘swing‘],      top: [200, ‘easeOutBounce‘]  });  也可以用另外一種寫法：  $(myElement).animate({      left: 500,      top: 200  }, {      specialEasing: {          left: ‘swing‘,          top: ‘easeOutBounce‘      }  });    使用jQuery內建動畫函數如slideUp()、slideDown()等來指定easing效果，以下兩種方法都可以： $(myElement).slideUp(1000, method, callback});  $(myElement).slideUp({      duration: 1000,       easing: method,       complete: callback  });

本文為 H5EDU 機構官方 HTML5培訓 教程，主要介紹：JQuery強化教程 —— jQuery Easing

JQuery強化教程 —— jQuery Easing