jQuery 自定動畫

加強認識物件

物件 說明
window 瀏覽器視窗物件
document 網頁文件內容全部

自定動畫效果

選取器物件.animate ( properties [,duration] [,easing] [,complete] )
[參考英文版] [參考簡中版] [參考JQ官網版]

改變選取器物件的屬性來設計動畫
( 物件屬性改變的目標 [,動畫持續的時間] [,加減速效果] [,完成動畫後執行的工作] )

自定動畫重要的輔助方法

例如 stop() 停止目前佇列準備執行的動畫
[參考英文版] [參考簡中版] [參考JQ官網版]

例如 delay() 延遲停留的時間控制
[參考英文版] [參考簡中版] [參考JQ官網版]

加減速變化的外掛

下載動畫時加減速變化的外掛 [下載連結網]

加上加減速變化的外掛後, 可以運用以下加減速的參數 [外掛列圖介紹參考網]

自定動畫小範例 HTML&CSS 部份 【結果展示參考】

<body>
    <div id="aa">aaaa</div>
    <div id="bb">bbbb</div>
</body>

<style>
    div { width:100px; height:100px; position:absolute; left:0; } 
    #aa { background:#6283f0; top:0px; }
    #bb { background:#a145ad; top:100px; }
</style>

JS 部份：第一階段（二個屬性依序動或一起動）

<script src="js/jquery-1.8.3.min.js" > </script>

<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>

JS 部份：第二階段（加減速特效）

<script src="js/jquery-1.8.3.min.js" > </script>
<script src="js/jquery.easing.1.3.js" > </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>

JS 部份：第三階段（callback技術）

<script src="js/jquery-1.8.3.min.js" > </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>

JS 部份：第四階段（delay延遲等待時間）

<script src="js/jquery-1.8.3.min.js" > </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>