JQuery Animate（）方法指南

核心要點

• jQuery 的 animate() 方法是一個多功能工具，允許開發者通過在指定持續時間內逐步改變元素的 CSS 屬性來創建自定義動畫。
• animate() 方法僅適用於數值型 CSS 屬性，不適用於極其複雜的動畫，因為可能會出現性能問題。
• 該方法主要有兩種形式：animate(properties[, duration][, easing][, callback]) 和 animate(properties[, options])，大多數參數都是可選的。這些參數控制動畫的各個方面，例如持續時間、緩動函數以及動畫完成後發生的情況。
• 開發者可以通過將多個 animate() 方法鏈接在一起創建更複雜的動畫，允許按照調用的順序執行動畫序列。此功能稱為“排隊”，增強了 jQuery 動畫的功能和靈活性。

jQuery 是一個優秀的庫，多年來它改變了數千名開發者處理項目的方式。在創建 jQuery 時，CSS 無法創建複雜的動畫，只能使用 JavaScript。由於創建了幾個用於此目的的方法，jQuery 在動畫方面提供了很大幫助。儘管它帶有一些簡單的動畫（fadeIn()、hide()、slideDown() 等），為了保持其輕量級，該庫提供了一個非常靈活的方法animate()，允許我們創建任何我們想要的動畫。本文的主題就是此方法。 jQuery 的 animate() 是一個包裝器方法，這意味著它操作的是一組先前選擇的 DOM 元素，這些元素由 jQuery 包裝。此方法允許您將您自己的自定義動畫效果應用於集合中的元素。為此，我們必須提供一組 CSS 樣式屬性和值，這些屬性將在動畫結束時達到。動畫效果期間樣式達到的中間值（由動畫引擎自動處理）由效果持續時間和緩動函數決定，這兩個選項我們很快就會討論。可以進行動畫處理的 CSS 樣式屬性列表僅限於接受數值的那些屬性。該值可以是絕對值（例如 200），也可以是從起始點的相對值。對於絕對值，jQuery 假設像素為默認單位。我們還可以指定其他單位，例如 em、rem 或百分比。要指定相對值，我們必須在前面加上 = 或 -= 來分別指示正或負方向上的相對目標值。現在我們對 animate() 有了一些了解，是時候看看它的簽名及其參數了。

簽名和參數

此方法主要有兩種形式，其大多數參數都是可選的（使用通常的方括號表示）：

• animate(properties[, duration][, easing][, callback])
• animate(properties[, options])

關於參數，還有很多要說的：

• properties (對象)：一個哈希表，其中包含動畫結束時應達到的值。
• duration (數字|字符串)：效果持續時間（以毫秒為單位）或預定義字符串之一：“slow”（600 毫秒）、“normal”（400 毫秒）或“fast”（ 200 毫秒）。默認為“normal”。
• easing (字符串)：執行轉換時要使用的緩動函數名稱。默認值為“swing”。
• callback (函數)：一個函數，在為每個動畫元素完成動畫時執行。
• options (對象)：一個哈希表，其中包含要傳遞給該方法的一組選項。可用的選項如下：
  • always (函數)：動畫完成或停止而未完成時調用的函數。
  • complete (函數)：動畫完成後執行的函數。
  • done (函數)：動畫完成後調用的函數。
  • duration (字符串|數字)：與前面描述的相同。
  • easing (字符串)：與前面描述的相同。
  • fail (函數)：動畫失敗時執行的函數。
  • progress (函數)：在動畫的每個步驟之後運行的函數。此函數每個動畫元素僅調用一次。
  • queue (布爾值)：如果動畫必須放在效果隊列中（稍後會詳細介紹）。默認值為 true。
  • specialEasing (對象)：一個或多個 CSS 屬性的哈希表，其值為緩動函數。
  • start (函數)：動畫開始時執行的函數。
  • step (函數)：一個函數，用於調用每個動畫元素的每個動畫屬性。

術語緩動用於描述處理和動畫幀速度的方式。當 queue 選項設置為 true 時，允許我們按順序運行動畫，當設置為 false 時，允許並行運行動畫。這給了我們很大的權力，我們可以隨意使用。在本文的其餘部分，我們將演示一些這些參數的實際應用，讓您體驗一下 animate() 的可能性。

示例用法

在本節中，我們將構建一些演示來發揮 animate() 的強大功能。請記住，由於與動畫的性能和流暢性有關的問題，此方法不適合非常非常複雜的動畫。

運行單個動畫

運行單個動畫非常容易，只需調用一次該方法即可。例如，我們可能希望將元素從框的一側移動到另一側。為了說明此動畫，我們將設置兩個 div 元素，一個在另一個內部。我們將對它們進行樣式設置，以便內部 div 具有紅色背景。完成此操作的代碼如下所示。 HTML：

<code class="language-html"><div class="rectangle">
  <div class="square-small"></div>
</div></code>

CSS：

<code class="language-css">.rectangle {
  width: 300px;
  height: 20px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

.square-small {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
}</code>

使用 animate() 的強大功能，我們將小型方塊從一側移動到另一側：

<code class="language-javascript">$('.rectangle')
  .find('.square-small')
  .animate({
    left: 280
  }, 'slow');</code>

在此代碼中，我們指定 left 屬性是唯一要進行動畫處理的屬性。我們將動畫持續時間設置為預設值 slow（600 毫秒）。我們使用絕對值移動內部 <div>（具有類 <code>.square-small）。該值基於我們使用前面列出的 CSS 代碼設置的容器寬度。此解決方案不是很靈活，因為如果我們更改容器的寬度，內部<div> 將無法到達另一側（如果我們在容器上設置更寬的寬度），或者將超過它（如果我們設置更窄的寬度）。一種解決方案是根據外部和內部 <code><div> 的當前寬度的計算來設置 <code>left 屬性的值，如下所示：

<code class="language-javascript">left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()</code>

在循環中運行多個動畫

在一個元素或一組元素上執行多個動畫就像鏈接對 animate() 的調用一樣容易。在此示例中，我們將移動一個小方塊，因為它沿著大方形內部沙漏的周長移動（而不是矩形）。為了構建此演示，我們將使用以下標記：

<code class="language-html"><div class="square-big">
  <div class="square-small"></div>
</div></code>

對於樣式，我們需要使用前面用於 .square-small 的相同 CSS，以及以下樣式來設置最外層正方形的樣式：

<code class="language-css">.square-big {
  width: 300px;
  height: 300px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}</code>

最後一步是編寫 JavaScript 代碼來繪製構成理想沙漏周長的四條線。從最外層正方形的左上角開始，我們必須對小型方塊進行動畫處理，直到它到達大正方形的右下角。小型方塊必須沿對角線移動才能產生效果。一旦它到達右下角，我們就必須將其移動到左下角。然後，它必須到達右上角，最後回到其原始位置。在介紹此演示時，我們說我們想要執行無限動畫。因此，我們必須找到一種方法來再次運行整個動畫，一旦完成最後一步。為此，我們可以將對四個鏈接的 animate() 調用的調用包裝在一個函數中，這樣我們就有了一個要引用的函數。然後，我們可以使用前面提到的 complete 回調和 IIFE 在完成最後一步時再次運行動畫。將此描述轉換為代碼的結果如下：

<code class="language-javascript">(function animation() {
  var options = {
    duration: 800,
    easing: 'linear'
  };

  $('.square-big')
    .find('.square-small')
    .animate({
      left: 280,
      top: 280
    }, options)
    .animate({
      left: 0
    }, options)
    .animate({
      left: 280,
      top: 0
    }, options)
    .animate({
      left: 0
    }, $.extend(true, {}, options, {
      complete: function() {
        animation();
      }
    }));
})();</code>

在上面的代碼中，請注意我們如何使用 options 變量，這樣我們不必在調用 animate() 時一遍又一遍地編寫相同的參數。此外，因為我們最後一次使用 options 時必須添加 complete 回調，所以我們使用了 jQuery 的 extend() 方法。

更多回調操作

作為我們的最後一個示例，我們將設置 options 參數（第二種形式的第二個參數）的 start、complete 和 progress 屬性。目的是在動畫運行時禁用單擊時運行動畫的按鈕。之後，我們想顯示動畫完成百分比。對於此示例，我們將修改我們構建的第一個演示。根據描述，我們必須添加一個按鈕和一個元素（我們將使用一個 span）來顯示百分比。此更改導致以下標記：

<code class="language-html"><div class="rectangle">
  <div class="square-small"></div>
</div></code>

我們不必添加更多樣式，因此我們可以跳到 JavaScript 代碼的討論。為了僅在單擊按鈕時運行動畫，我們必須向按鈕的單擊事件添加一個處理程序。在處理程序內部，我們使用 jQuery 的 prop() 方法根據動畫是否正在運行或完成來禁用和啟用按鈕。最後，我們使用傳遞給附加到 progress 選項的處理程序的第二個參數來顯示動畫完成百分比。生成的代碼如下所示：

<code class="language-css">.rectangle {
  width: 300px;
  height: 20px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

.square-small {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
}</code>

結論

本文討論了使用 jQuery 的 animate() 方法可以做什麼。我們介紹了它的簽名及其接受的參數。在本文中，我們探討了三個示例動畫。本文僅簡要介紹了 animate() 的可能性。事實上，只要有一點耐心和創造力，我們就可以創建真正複雜而精美的動畫。

關於 jQuery Animate 方法的常見問題 (FAQ)

什麼是 jQuery animate 方法，它是如何工作的？

jQuery animate 方法是一個強大的工具，允許您創建自定義動畫。它的工作原理是逐步更改元素的 CSS 屬性，持續時間由您指定。您可以對任何 CSS 屬性進行動畫處理，但必須使用駝峰式大小寫指定屬性，例如 marginLeft 而不是 margin-left。 animate 方法還允許您指定緩動函數，這些函數控制動畫的速度，以及在動畫完成後執行的回調函數。

如何停止或暫停 jQuery 動畫？

jQuery 提供了 stop() 方法來停止動畫。此方法會停止選定元素上當前正在運行的動畫。如果您想暫停動畫，則會稍微複雜一些，因為 jQuery 沒有為此提供內置方法。但是，您可以通過使用插件或手動控制動畫進度來實現它。

我可以一次使用 jQuery animate 動畫處理多個屬性嗎？

是的，您可以使用 jQuery animate 方法一次動畫處理多個 CSS 屬性。您只需要在 properties 對像中包含所有要進行動畫處理的屬性即可。例如，您可以同時對元素的寬度和高度進行動畫處理。

我如何在 jQuery animate 中使用 step 函數？

jQuery animate 中的 step 函數是一個回調函數，在動畫的每個步驟中都會執行。此函數傳遞兩個參數：now，它是動畫屬性的當前值；fx，它是一個包含有關動畫的信息的對象。您可以使用 step 函數來創建複雜的動畫或調試動畫。

我可以將 jQuery animate 用於非數值 CSS 屬性嗎？

不可以，jQuery animate 方法僅適用於數值 CSS 屬性。如果您嘗試對非數值屬性（如顏色或背景顏色）進行動畫處理，則它將不起作用。但是，您可以使用 jQuery UI 或 jQuery Color 等插件來對這些屬性進行動畫處理。

如何使用 jQuery animate 鏈接動畫？

您可以通過簡單地一個接一個地調用多個 animate 方法來鏈接 jQuery 動畫。 jQuery 將按照調用的順序執行動畫。這稱為“排隊”，它是 jQuery 動畫的一個強大功能。

我可以使用 jQuery animate 創建滑動效果嗎？

是的，您可以使用 jQuery animate 方法創建滑動效果。您可以通過對元素的高度或寬度進行動畫處理來實現此目的。但是，jQuery 還提供了 slideDown、slideUp 和 slideToggle 方法，如果您只想創建簡單的滑動效果，則這些方法更容易使用。

如何使我的 jQuery 動畫更流暢？

有多種方法可以使您的 jQuery 動畫更流暢。一種方法是使用緩動函數，這些函數控制動畫的速度。另一種方法是使用 requestAnimationFrame 方法，該方法允許瀏覽器優化動畫。您還可以通過最大限度地減少 DOM 操作次數並在可能的情況下使用 CSS 轉換來提高性能。

我可以在一組元素上使用 jQuery animate 嗎？

是的，您可以在一組元素上使用 jQuery animate 方法。當您在一個包含多個元素的 jQuery 對像上調用 animate 方法時，動畫將應用於集合中的所有元素。

如何使用 jQuery animate 創建淡入淡出效果？

您可以通過對 opacity 屬性進行動畫處理來使用 jQuery animate 方法創建淡入淡出效果。但是，jQuery 還提供了 fadeIn、fadeOut 和 fadeToggle 方法，如果您只想創建簡單的淡入淡出效果，則這些方法更容易使用。