核心要點(diǎn)

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

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

簽名和參數(shù)

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

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

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

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

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

示例用法

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

運(yùn)行單個(gè)動(dòng)畫

運(yùn)行單個(gè)動(dòng)畫非常容易，只需調(diào)用一次該方法即可。例如，我們可能希望將元素從框的一側(cè)移動(dòng)到另一側(cè)。為了說明此動(dòng)畫，我們將設(shè)置兩個(gè) div 元素，一個(gè)在另一個(gè)內(nèi)部。我們將對(duì)它們進(jìn)行樣式設(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() 的強(qiáng)大功能，我們將小型方塊從一側(cè)移動(dòng)到另一側(cè)：

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

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

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

在循環(huán)中運(yùn)行多個(gè)動(dòng)畫

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

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

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

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

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

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

更多回調(diào)操作

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

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

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

.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ù)。在本文中，我們探討了三個(gè)示例動(dòng)畫。本文僅簡(jiǎn)要介紹了 animate() 的可能性。事實(shí)上，只要有一點(diǎn)耐心和創(chuàng)造力，我們就可以創(chuàng)建真正複雜而精美的動(dòng)畫。

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

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

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

如何停止或暫停 jQuery 動(dòng)畫？

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

我可以一次使用 jQuery animate 動(dòng)畫處理多個(gè)屬性嗎？

是的，您可以使用 jQuery animate 方法一次動(dòng)畫處理多個(gè) CSS 屬性。您只需要在 properties 對(duì)像中包含所有要進(jìn)行動(dòng)畫處理的屬性即可。例如，您可以同時(shí)對(duì)元素的寬度和高度進(jìn)行動(dòng)畫處理。

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

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

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

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

如何使用 jQuery animate 鏈接動(dòng)畫？

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

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

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

如何使我的 jQuery 動(dòng)畫更流暢？

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

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

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

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

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

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