前端班課程講義

主題

jQuery - 動畫 ​

使用 jQuery 編寫動畫效果

語法 ​

jQuery 所有的動畫都是基於 .animate()語法
原理是在指定的時間內將 CSS 的值改為指定的數值

  • .animate(CSS, slow/fast/毫秒, 'linear', 完成時的 function ) 動畫
    • CSS 要改變的 CSS 屬性，可以用 += 和 -= 去做相對的動畫，必填
    • slow/fast/毫秒 動畫時間，預設為 400
    • linear 動畫效果，預設為 swing
    • 完成時的 function 動畫完成後要執行的 function
  • .stop(是否停止之後的動畫, 是否跳到動畫結束) 停止動畫
  • .fadeOut(slow/fast/毫秒, 'linear', 完成時的 function) 淡出
  • .fadeIn(slow/fast/毫秒, 'linear', 完成時的 function) 淡入
  • .fadeTo(slow/fast/毫秒, 透明度, 'linear', 完成時的 function) 淡出或淡入至指定透明度
  • .fadeToggle(slow/fast/毫秒, 'linear', 完成時的 function) 切換淡入或淡出
  • .slideDown(slow/fast/毫秒, 'linear', 完成時的 function) 滑入，遞增 height 至原本高度
  • .slideUp(slow/fast/毫秒, 'linear', 完成時的 function) 滑出，遞減 height 至 0
  • .slideToggle(slow/fast/毫秒, 'linear', 完成時的 function) 切換滑入或滑出

注意

  • .fadeOut() 的淡出效果在透明度變為 0 後會加上 display: none
  • .animate() 僅能修改值為數字的 CSS，若需修改顏色，需使用 jQuery UI

TIP

jQuery 動畫預設只有 swing 和 linear 兩種效果
若要使用其他效果，需引入 jQuery UI

應用範例 ​

圖片輪播範例

卡片範例