核心要點

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

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

簽名和參數(shù)

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

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

關(guān)于參數(shù)，還有很多要說的：

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

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

示例用法

在本節(jié)中，我們將構(gòu)建一些演示來發(fā)揮 animate() 的強大功能。請記住，由于與動畫的性能和流暢性有關(guān)的問題，此方法不適合非常非常復(fù)雜的動畫。

運行單個動畫

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

<div class="rectangle">
  <div class="square-small"></div>
</div>

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;
}

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

$('.rectangle')
  .find('.square-small')
  .animate({
    left: 280
  }, 'slow');

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

left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()

在循環(huán)中運行多個動畫

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

<div class="square-big">
  <div class="square-small"></div>
</div>

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

.square-big {
  width: 300px;
  height: 300px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

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

(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();
      }
    }));
})();

在上面的代碼中，請注意我們?nèi)绾问褂?options 變量，這樣我們不必在調(diào)用 animate() 時一遍又一遍地編寫相同的參數(shù)。此外，因為我們最后一次使用 options 時必須添加 complete 回調(diào)，所以我們使用了 jQuery 的 extend() 方法。

更多回調(diào)操作

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

<div class="rectangle">
  <div class="square-small"></div>
</div>

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

.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;
}

結(jié)論

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

關(guān)于 jQuery Animate 方法的常見問題 (FAQ)

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

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

如何停止或暫停 jQuery 動畫？

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

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

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

我如何在 jQuery animate 中使用 step 函數(shù)？

jQuery animate 中的 step 函數(shù)是一個回調(diào)函數(shù)，在動畫的每個步驟中都會執(zhí)行。此函數(shù)傳遞兩個參數(shù)：now，它是動畫屬性的當(dāng)前值；fx，它是一個包含有關(guān)動畫的信息的對象。您可以使用 step 函數(shù)來創(chuàng)建復(fù)雜的動畫或調(diào)試動畫。

我可以將 jQuery animate 用于非數(shù)值 CSS 屬性嗎？

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

如何使用 jQuery animate 鏈接動畫？

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

我可以使用 jQuery animate 創(chuàng)建滑動效果嗎？

是的，您可以使用 jQuery animate 方法創(chuàng)建滑動效果。您可以通過對元素的高度或?qū)挾冗M行動畫處理來實現(xiàn)此目的。但是，jQuery 還提供了 slideDown、slideUp 和 slideToggle 方法，如果您只想創(chuàng)建簡單的滑動效果，則這些方法更容易使用。

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

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

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

是的，您可以在一組元素上使用 jQuery animate 方法。當(dāng)您在一個包含多個元素的 jQuery 對象上調(diào)用 animate 方法時，動畫將應(yīng)用于集合中的所有元素。

如何使用 jQuery animate 創(chuàng)建淡入淡出效果？

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

以上是JQuery Animate（）方法指南的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！