標籤：slow style 環境 nbsp win set containe ber 包含
:http://www.jb51.net/jiaoben/32922.html
基本文法：easing:格式為json,{duration:期間,easing:過渡效果,complete:成功後的回呼函數}
介紹：easing是jquery的一個外掛程式，使用它可以建立更加絢麗的動畫效果。
環境：因為easing是jQuery的外掛程式，所以必須是在引入jquery之後再引入它，如下：
| 12 | <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:
| 1 | <div style="width:100px; height:100px; 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; 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; position:absolute; left:20px;"></div></body></html>
jquery.easing的使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
