jQuery 提供了一些諸如 show、hide、slideUp、fadeIn 等等動畫方法，可以方便的切換元素的顯隱。更有強大的自定義動畫方法 animate ，可以實現很多動畫效果。爲了讓動畫有好的過渡變化過程，官方爲這些方法設置 easing 屬性，但是官方沒有給出很多過渡效果。
jquery.easing.js 這個插件，增加了很多過渡效果，引入之後可以讓動畫過渡過程更加多樣化。
官方也有案例：打開官方實例。
如何使用 jquery.easing.js
第一步 引入插件
jQuery 插件嘛，當然要先引入 jQuery，然後再引入 jquery.easing.js 。
<span style="font-family:Arial;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<span style="white-space:pre"> </span><html xmlns="http://www.w3.org/1999/xhtml">
<span style="white-space:pre"> </span><head>
<span style="white-space:pre"> </span><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<span style="white-space:pre"> </span><title>無標題文檔</title>
<span style="white-space:pre"> </span><script src="jquery 2.1.1.js" type="text/javascript"></script>
<span style="white-space:pre"> </span><script src="jquery.easing.1.3.mine.js" type="text/javascript"></script></span>
第二步 啓用插件
首先先假設使用 animate 方法把網頁上的 class 爲 aa 的 div 的寬度，從原本的 300px 變成 600px。按照 animate 的寫法，加上 easing 。
<span style="font-family:Arial;">$("#toggle2").click(function(e){
$('#example2').animate(
{height:200},
{duration: 1000, easing: 'easeInOutCirc'}
)
.animate(
{height:100},
{duration: 1000, easing: 'easeOutBounce'}
);</span>插件的所有函數曲線圖和效果見：http://easings.net/zh-cn。
可以應用的動畫方法
不僅僅支持 animate 方法，還支持 hide、show、slideDown、slideUp、fadeIn、fadeOut等等支持 easing 的動畫方法。只需要按照官方對應的格式去寫就可以，這個插件相當於擴充了官方的過渡效果樣式。
插件的參數
這個插件有三個參數：duration、easing、complete。
duration 參數
用來指定動畫變化的時間，以毫秒爲單位。
easing 參數
指定這個動畫要使用何種過渡樣式。具體的過渡樣式名和效果，需要在http://easings.net/zh-cn這裏，選擇找到自己想要的效果。
complete 參數
設置一個回調函數，當動畫完成之後，執行這個函數。
其他注意事項
使用 slideUp 動畫方法
slideUp 這類的動畫方法，要比 animate 簡單一些，不需要複雜的屬性參數，所以可以直接這樣寫：
<span style="font-family:Arial;">$(element).slideUp(1000, method, callback});
$(element).slideUp({ duration: 1000, easing: method, complete: callback});</span>其他的 hide 、show 之類的方法，自行類比。
指定默認的 easing 樣式
在使用中 easing 參數是可以省略的，省略之後，就會調用默認的過渡樣式。可以使用下面一句代碼，指定默認的動畫過渡樣式。
jQuery.easing.def = "過渡樣式名，例如 easeInOutCirc";用起來挺簡單的，但是有了更和諧的變化效果，可以增強用戶體驗。
下面是一個完整的應用案例：
<span style="font-family:Arial;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<span style="white-space:pre"> </span><html xmlns="http://www.w3.org/1999/xhtml">
<span style="white-space:pre"> </span><head>
<span style="white-space:pre"> </span><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<span style="white-space:pre"> </span><title>無標題文檔</title>
<span style="white-space:pre"> </span><style>
<span style="white-space:pre"> </span>.big {
<span style="white-space:pre"> </span> background: none repeat scroll 0 0 #EEEEEE;
<span style="white-space:pre"> </span> height: 100px;
<span style="white-space:pre"> </span>position:absolute;
<span style="white-space:pre"> </span>left:0;
<span style="white-space:pre"> </span>width:200px;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>.big2{
<span style="white-space:pre"> </span>top:200px;
}
<span style="white-space:pre"> </span>.big a {
<span style="white-space:pre"> </span> display: block;
<span style="white-space:pre"> </span> font-size: 2em;
<span style="white-space:pre"> </span> padding: 5px 0 0 10px;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span></style>
<span style="white-space:pre"> </span><script src="jquery 2.1.1.js" type="text/javascript"></script>
<span style="white-space:pre"> </span><script src="jquery.easing.1.3.mine.js" type="text/javascript"></script>
<span style="white-space:pre"> </span><script type="text/javascript">
<span style="white-space:pre"> </span>$(document).ready(function() {
<span style="white-space:pre"> </span>jQuery.easing.def = 'easeOutBounce';
<span style="white-space:pre"> </span>$('#example').animate({left:"200px"}, {duration: 1000, easing: 'easeInOutCirc'}).animate({left:"0px"}, {duration: 1000, easing: 'e<span style="white-space:pre"> </span>aseOutBounce'});
<span style="white-space:pre"> </span>$("#toggle2").click(function(e){
<span style="white-space:pre"> </span>$('#example2').animate(
<span style="white-space:pre"> </span>{height:200},
<span style="white-space:pre"> </span>{duration: 1000, easing: 'easeInOutCirc'}
<span style="white-space:pre"> </span>)
<span style="white-space:pre"> </span>.animate(
<span style="white-space:pre"> </span>{height:100},
<span style="white-space:pre"> </span>{duration: 1000, easing: 'easeOutBounce'}
<span style="white-space:pre"> </span>);
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span></script>
<span style="white-space:pre"> </span></head>
<span style="white-space:pre"> </span><body>
<span style="white-space:pre"> </span><p id="example" class="big"><a href="#example" id="toggle">onload</a></p>
<span style="white-space:pre"> </span><p id="example2" class="big big2"><a href="#example" id="toggle2">The Clicker</a></p>
<span style="white-space:pre"> </span></body>
<span style="white-space:pre"> </span></html></span><span style="font-family:Microsoft YaHei, Arial, sans-serif;">
</span>