| 有關基本動畫效果 Effect |
說明 |
| show ( [動畫持續的時間] [,....] ) |
顯示
[參考英文版]
[參考簡中版]
[參考JQ官網版] |
| hide ( [動畫持續的時間] [,....] ) |
隱藏 |
| toggle ( [動畫持續的時間] [,....] ) |
顯示與隱藏的切換 |
| |
|
| slideDown ( [動畫持續的時間] [, ....] ) |
向下展開
[參考英文版]
[參考簡中版]
[參考JQ官網版] |
| slideUp ( [動畫持續的時間] [, ....] ) |
向上收合 |
| slideToggle ( [動畫持續的時間] [, ....] ) |
向下展開與向上收合的切換 |
| |
|
| fadeIn ( [動畫持續的時間] [,....] ) |
淡入
[參考英文版]
[參考簡中版]
[參考JQ官網版] |
| fadeOut ( [動畫持續的時間] [,....] ) |
淡出 |
| fadeTo ( 動畫持續的時間, 不透明度 [,....] ) |
淡化到指定數值 |
| fadeToggle ( [動畫持續的時間] [,....] ) |
淡入與淡出的切換 |
基礎動畫小範例【結果展示參考】 展開/收合
<body>
<h2>========== 基礎動畫的練習 ==========</h2>
<p>
<button class="ctr1">1. 顯示 / 隱藏</button>
<button class="ctr2">2. 淡入 / 淡出</button>
<button class="ctr3">3. 展開 / 收合</button>
</p>
<ul>
<li>清單項目1111</li>
<li>清單項目2222</li>
<li>清單項目3333</li>
<li>清單項目4444</li>
<li>清單項目5555</li>
</ul>
</body>
<style>
body>h2 { font-size: 20px; background-color: #464277; color: #fff; padding: 5px; }
button { font-size:16px; padding:5px; margin:5px; }
ul { background-color: lightskyblue; padding: 10px; padding-left: 50px; }
li { font-size:18px; padding:5px; margin: 5px; font-weight: bold; }
</style>
<script>
$('.ctr1').click(function(){
$('ul').toggle();
});
$('.ctr2').click(function(){
$('ul').fadeToggle();
});
$('.ctr3').click(function(){
$('ul').slideToggle();
});
</script>
基礎動畫延伸練習試一試：下拉式選單【結果展示參考】
基礎動畫延伸練習試一試：折疊式面板【結果展示參考】
自定動畫的語法 展開/收合
選取器物件.animate ( properties [,duration] [,easing] [,complete] )
[參考英文版]
[參考簡中版]
[參考JQ官網版]
改變選取器物件的屬性來設計動畫
( 物件屬性改變的目標 [,動畫持續的時間] [,加減速效果] [,完成動畫後執行的工作] )
自定動畫重要的輔助方法 展開/收合
例如 stop() 停止目前佇列準備執行的動畫
[參考英文版]
[參考簡中版]
[參考JQ官網版]
例如 delay() 延遲停留的時間控制
[參考英文版]
[參考簡中版]
[參考JQ官網版]
加減速變化的外掛 展開/收合
下載動畫時加減速變化的外掛
[下載連結網]
加上加減速變化的外掛後, 可以運用以下加減速的參數
[外掛列圖介紹參考網]
[外掛列圖介紹參考網]
自定動畫小範例：HTML＆CSS 部份【結果展示參考】 展開/收合
<body>
<div id="aa">aa</div>
<div id="bb">bb</div>
</body>
自定動畫小範例：JS 部份第一階段（二個屬性依序動或一起動） 展開/收合
<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>
var targetLeft = $(document).width()-$('div').width();
var targetTop = $(document).height()-$('div').height();
//#aa區塊移動的同時前段加上了 easeOutBack 加速前衝超過再後退一步的效果
//---------------後段加上了 easeOutBounce 目的地位置彈跳的效果
$('#aa').animate({left:targetLeft},1000,'easeOutBounce' )
.animate({top:targetTop},1000,'easeOutBounce' );
//#bb區塊移動的同時加上了 easeInCirc 先減速後加速的效果
$('#bb').animate({left:targetLeft,top:targetTop},2000,'easeInCirc' );
</script>
自定動畫小範例：JS 部份第三階段（callback技術） 展開/收合
<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>
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(2000).fadeOut(1000);
//當#bb區塊移到右下角後,
//延遲等待2000毫秒(也就是#aa區塊趕上#bb區塊之後),
//定#bb區塊淡出。
</script>
WEB 