使用 jquery.easing.js 加強動畫過渡效果

原文地址：http://www.qianxingzhem.com/post-1778.html

jQuery 提供了一些諸如 show、hide、slideUp、fadeIn 等等動畫方法，能夠方便的切換元素的顯隱。更有強大的自定義動畫方法 animate ，能夠實現不少動畫效果。爲了讓動畫有好的過渡變化過程，官方爲這些方法設置 easing 屬性，可是官方沒有給出不少過渡效果。

jquery.easing.js 這個插件，增長了不少過渡效果，引入以後可讓動畫過渡過程更加多樣化。

先來看一下：Demo。官方也有案例：打開官方主頁。

如何使用 jquery.easing.js

第一步 引入插件

jQuery 插件嘛，固然要先引入 jQuery，而後再引入 jquery.easing.js  。

代碼不換行 代碼換行

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

而後再在引入代碼下面編寫調用的 Javascript 代碼，注意代碼順序。

第二步 啓用插件

首先先假設使用 animate 方法把網頁上的 class 爲 aa 的 div 的寬度，從本來的 300px 變成 600px。按照 animate 的寫法，加上 easing 。

代碼不換行 代碼換行

$('.aa').animate( {'width':'600'} , { duration:1000,easing:'easeInOutCirc' });

這樣，就對 aa 對象，啓用了一個 easeInOutCirc 過渡效果，在 1000毫秒 內變成 600px。

能夠應用的動畫方法

不單單支持 animate 方法，還支持 hide、show、slideDown、slideUp、fadeIn、fadeOut等等支持 easing 的動畫方法。只須要按照官方對應的格式去寫就能夠，這個插件至關於擴充了官方的過渡效果樣式。

插件的參數

這個插件有三個參數：duration、easing、complete。

duration 參數

用來指定動畫變化的時間，以毫秒爲單位。

easing 參數

指定這個動畫要使用何種過渡樣式。具體的過渡樣式名和效果，須要在官方主頁上查看左邊的 「Example」，選擇找到本身想要的效果。

complete 參數

設置一個回調函數，當動畫完成以後，執行這個函數。

其餘注意事項

使用 slideUp 動畫方法

slideUp 這類的動畫方法，要比 animate 簡單一些，不須要複雜的屬性參數，因此能夠直接這樣寫：

代碼不換行 代碼換行

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

其餘的 hide 、show 之類的方法，自行類比。

指定默認的 easing 樣式

在使用中 easing 參數是能夠省略的，省略以後，就會調用默認的過渡樣式。可使用下面一句代碼，指定默認的動畫過渡樣式。

代碼不換行 代碼換行

jQuery.easing.def = "過渡樣式名，例如 easeInOutCirc";

用起來挺簡單的，可是有了更和諧的變化效果，能夠加強用戶體驗。更多用法歡迎觀看 Demo 。