WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

2-13. 【動畫】的設計

jQuery 基礎動畫效果 Effect 展開/收合

有關基本動畫效果 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>

基礎動畫延伸練習試一試:下拉式選單【結果展示參考

基礎動畫延伸練習試一試:折疊式面板【結果展示參考

jQuery 自定動畫效果 Effect 展開/收合

自定動畫的語法 展開/收合

選取器物件.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>

 

go TOP