下載地址:http://www.jb51.net/jiaoben/32922.html
基本語法：easing:格式為json,{duration:持續時間,easing:過渡效果,complete:成功后的回調函數}
介紹：easing是jquery的一個插件，使用它可以創建更加絢麗的動畫效果。
環境：因為easing是jQuery的插件，所以必須是在引入jquery之后再引入它，如下：
<script type="text/javascript" src="jquery-1.11.0.js"></script> <script type="text/javascript" src="jquery.easing.min.js"></script>
使用：
easing是基於animate這個函數,animate的語法:animate(params,speed,easing,fn);
params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合,必須為json格式
speed：三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing：過渡效果名稱,默認jquery只提供"linear" 和 "swing",默認過渡效果是"swing"
fn:動畫完成時執行的函數
如果在沒引入easing的情況下如果想改變元素的left:
html:
<div style="width:100px; height:100px; background-color:#ccc; position:absolute; left:20px;"></div>
jquery代碼：
$(function (){ $(document).click(function (){ $("div").animate({left: "300px"}, 1000,"linear",function (){ alert('a'); }); }); });
在引入easing之后animate語法：animate(params,easing)
params：一組包含作為動畫屬性和終值的樣式屬性和及其值的集合,必須為json格式
easing:格式為json,{duration:持續時間,easing:過渡效果,complete:成功后的回調函數}
例子：同樣改變left值
html:
<div style="width:100px; height:100px; background-color:#ccc; position:absolute; left:20px;"></div>
jquery:
$(function (){ $(document).click(function (){ $("div").animate({left: "300px"},{ duration:1000, easing:"easeOutBounce", complete:function (){ alert("動畫完成"); } }); }); });
完整代碼：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-1.11.0.js"></script> <script type="text/javascript" src="jquery.easing.min.js"></script> <script type="text/javascript"> $(function (){ $(document).click(function (){ $("div").animate({left: "300px"},{ duration:1000, easing:"easeOutBounce", complete:function (){ alert("動畫完成"); } }); }); }); </script> </head> <body> <div style="width:100px; height:100px; background-color:#ccc; position:absolute; left:20px;"></div> </body> </html>