jQuery 自訂動畫：animate()、delay() 與 stop()

Q: CSS 屬性名稱要怎麼寫？

寫成物件的鍵值，屬性名用駝峰式，例如：fontSize；若要保留原本的連字號寫法，就得用引號包起來。

Q: 什麼是動畫佇列？

同一個元素上的動畫不會同時播放，而是排成一列依序執行。因此串接多個動畫方法會一個接一個播，delay 也是插進這個佇列裡等待。

Q: 動畫被重複觸發而不斷累積怎麼辦？

在啟動新動畫之前先呼叫 stop 清掉佇列中未播放的動畫，就不會愈點愈長。這在滑鼠移入移出的效果上特別常見。

Q: stop 的兩個參數怎麼填？

第一個決定是否清空整個佇列，第二個決定當前這段動畫要不要直接跳到結束狀態。兩個都填 true，代表立刻停止並讓元素停在最終樣式。

當顯示隱藏、滑動與淡入淡出不敷使用時，就輪到以下幾個方法上場，它們可以自行定義動畫效果。

animate()

自行定義 CSS 樣式以進行動畫的製作。

animate(properties, duration, complete);

參數

功能	說明	型別	範例	備註
properties	CSS 屬性與值	`Object`	`{ top: 100, left: 700 }`	必填
duration	效果的速度	`String`、`Number`	`'slow'`、`'fast'`、`400`
complete	結束後的執行事項	`Function`	`function() {}`

只吃數值型屬性

animate() 只支援數值型的 CSS 屬性，例如：寬高、位移與不透明度。色彩、transform 這類屬性需要額外外掛，實務上多半直接交給 CSS 動畫處理。

範例

屬性名稱以駝峰式書寫，若要保留連字號的寫法就得用引號包起來。

HTMLJavaScriptCSS

html

<div id="Dom" class="dom">DOM</div>

$('#Dom').animate(
  {
    left: 700,
    opacity: 0.5,
    fontSize: 30,
  },
  600,
);

css

.dom {
  position: absolute;
  left: 0;
}

delay()

延遲動畫效果的開始時間。它是插進 動畫佇列 裡的一段等待，因此必須接在動畫之間才有意義。

delay(duration);

參數

功能	說明	型別	範例	備註
duration	效果的速度	`Number`	`400`	必填

範例

JavaScript

// 淡入 → 等 1 秒 → 淡出
$('#Dom').fadeIn(400).delay(1000).fadeOut(400);

stop()

停止正在運作的動畫。同一個元素上的動畫會排成佇列依序播放，若事件被重複觸發，動畫就會不斷累積，這時就需要它。

stop(clearQueue, jumpToEnd);

參數

功能	說明	型別	範例	備註
clearQueue	清除佇列動畫	`Boolean`	`true`、`false`	必填
jumpToEnd	立即結束動畫	`Boolean`	`true`、`false`	必填

範例

滑鼠快速進出時，先把未播放的動畫清掉再播新的，就不會愈晃愈久。

JavaScript

$('#Dom')
  .on('mouseenter', function () {
    $(this).stop(true, false).fadeTo(200, 1);
  })
  .on('mouseleave', function () {
    $(this).stop(true, false).fadeTo(200, 0.5);
  });