物件 | 說明 |
---|---|
window | 瀏覽器視窗物件 |
document | 網頁文件內容全部 |
選取器物件.animate ( properties [,duration] [,easing] [,complete] )
[參考英文版]
[參考簡中版]
[參考JQ官網版]
改變選取器物件的屬性來設計動畫
( 物件屬性改變的目標 [,動畫持續的時間] [,加減速效果] [,完成動畫後執行的工作] )
例如 stop() 停止目前佇列準備執行的動畫
[參考英文版]
[參考簡中版]
[參考JQ官網版]
例如 delay() 延遲停留的時間控制
[參考英文版]
[參考簡中版]
[參考JQ官網版]
下載動畫時加減速變化的外掛 [下載連結網]
加上加減速變化的外掛後, 可以運用以下加減速的參數 [外掛列圖介紹參考網]
<body> <div id="aa">aaaa</div> <div id="bb">bbbb</div> </body>
<script> //區塊到視窗右邊邊緣的座標 var targetLeft = $(document).width()-$('div').width(); //區塊到視窗下方邊緣的座標 var targetTop = $(document).height()-$('div').height(); //#aa區塊先執行往右移的動畫, 再執行往下移的動畫, 總共花了2秒 $('#aa').animate({left:targetLeft},1000) .animate({top:targetTop},1000); //#bb區塊同時執行了往右移及往下移(也就是往右下角斜線移動), 持續了2秒 $('#bb').animate({left:targetLeft,top:targetTop},2000); </script>
<script> var targetLeft = $(document).width()-$('div').width(); var targetTop = $(document).height()-$('div').height(); //#aa區塊移動的同時前段加上了 easeOutBack 加速前衝超過再後退一步的效果 //---------------後段加上了 easeOutBounce 目的地位置彈跳的效果 $('#aa').animate({left:targetLeft},1000,'easeOutBack') .animate({top:targetTop},1000,'easeOutBounce'); //#bb區塊移動的同時加上了 easeInCirc 先減速後加速的效果 $('#bb').animate({left:targetLeft,top:targetTop},2000,'easeInCirc'); </script>
<script> var targetLeft = $(document).width()-$('div').width(); var targetTop = $(document).height()-$('div').height(); //當#bb區塊的動畫完成時, 才執行#aa區塊的動畫 $('#bb').animate({left:targetLeft,top:targetTop},2000,'easeInCirc', function(){ $('#aa').animate({left:targetLeft},1000,'easeOutBack') .animate({top:targetTop},1000,'easeOutBounce'); }); </script>
<script> var targetLeft = $(document).width()-$('div').width(); var targetTop = $(document).height()-$('div').height(); $('#bb').animate({left:targetLeft,top:targetTop},2000,'easeOutCirc', function(){ $('#aa').animate({left:targetLeft},1000,'easeOutBack') .animate({top:targetTop},1000,'easeOutBounce'); }) .delay(3000).fadeOut(1000); //當#bb區塊移到右下角後, //延遲等待3000毫秒(也就是#aa區塊趕上#bb區塊之後), //定#bb區塊淡出。 </script>