| 物件 | 說明 |
|---|---|
| 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>