核心要點
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：
<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() 的強大功能，我們將小型方塊從一側移動到另一側：
$('.rectangle')
.find('.square-small')
.animate({
left: 280
}, 'slow');在此代碼中，我們指定 left 屬性是唯一要進行動畫處理的屬性。我們將動畫持續時間設置為預設值 slow（600 毫秒）。我們使用絕對值移動內部 <div>（具有類 .square-small）。該值基於我們使用前面列出的 CSS 代碼設置的容器寬度。此解決方案不是很靈活，因為如果我們更改容器的寬度，內部<div> 將無法到達另一側（如果我們在容器上設置更寬的寬度），或者將超過它（如果我們設置更窄的寬度）。一種解決方案是根據外部和內部 <div> 的當前寬度的計算來設置 left 屬性的值，如下所示：
left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()在一個元素或一組元素上執行多個動畫就像鏈接對 animate() 的調用一樣容易。在此示例中，我們將移動一個小方塊，因為它沿著大方形內部沙漏的周長移動（而不是矩形）。為了構建此演示，我們將使用以下標記：
<div class="square-big"> <div class="square-small"></div> </div>
對於樣式，我們需要使用前面用於 .square-small 的相同 CSS，以及以下樣式來設置最外層正方形的樣式：
.square-big {
width: 300px;
height: 300px;
display: block;
position: relative;
border: 1px solid black;
margin: 20px 0;
}最後一步是編寫 JavaScript 代碼來繪製構成理想沙漏周長的四條線。從最外層正方形的左上角開始，我們必須對小型方塊進行動畫處理，直到它到達大正方形的右下角。小型方塊必須沿對角線移動才能產生效果。一旦它到達右下角，我們就必須將其移動到左下角。然後，它必須到達右上角，最後回到其原始位置。在介紹此演示時，我們說我們想要執行無限動畫。因此，我們必須找到一種方法來再次運行整個動畫，一旦完成最後一步。為此，我們可以將對四個鏈接的 animate() 調用的調用包裝在一個函數中，這樣我們就有了一個要引用的函數。然後，我們可以使用前面提到的 complete 回調和 IIFE 在完成最後一步時再次運行動畫。將此描述轉換為代碼的結果如下：
(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();
}
}));
})();在上面的代碼中，請注意我們如何使用 options 變量，這樣我們不必在調用 animate() 時一遍又一遍地編寫相同的參數。此外，因為我們最後一次使用 options 時必須添加 complete 回調，所以我們使用了 jQuery 的 extend() 方法。
作為我們的最後一個示例，我們將設置 options 參數（第二種形式的第二個參數）的 start、complete 和 progress 屬性。目的是在動畫運行時禁用單擊時運行動畫的按鈕。之後，我們想顯示動畫完成百分比。對於此示例，我們將修改我們構建的第一個演示。根據描述，我們必須添加一個按鈕和一個元素（我們將使用一個 span）來顯示百分比。此更改導致以下標記：
<div class="rectangle"> <div class="square-small"></div> </div>
我們不必添加更多樣式，因此我們可以跳到 JavaScript 代碼的討論。為了僅在單擊按鈕時運行動畫，我們必須向按鈕的單擊事件添加一個處理程序。在處理程序內部，我們使用 jQuery 的 prop() 方法根據動畫是否正在運行或完成來禁用和啟用按鈕。最後，我們使用傳遞給附加到 progress 選項的處理程序的第二個參數來顯示動畫完成百分比。生成的代碼如下所示：
.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;
}結論
本文討論了使用 jQuery 的 animate() 方法可以做什麼。我們介紹了它的簽名及其接受的參數。在本文中，我們探討了三個示例動畫。本文僅簡要介紹了 animate() 的可能性。事實上，只要有一點耐心和創造力，我們就可以創建真正複雜而精美的動畫。
關於 jQuery Animate 方法的常見問題 (FAQ)
jQuery animate 方法是一個強大的工具，允許您創建自定義動畫。它的工作原理是逐步更改元素的 CSS 屬性，持續時間由您指定。您可以對任何 CSS 屬性進行動畫處理，但必須使用駝峰式大小寫指定屬性，例如 marginLeft 而不是 margin-left。 animate 方法還允許您指定緩動函數，這些函數控制動畫的速度，以及在動畫完成後執行的回調函數。
jQuery 提供了 stop() 方法來停止動畫。此方法會停止選定元素上當前正在運行的動畫。如果您想暫停動畫，則會稍微複雜一些，因為 jQuery 沒有為此提供內置方法。但是，您可以通過使用插件或手動控制動畫進度來實現它。
是的，您可以使用 jQuery animate 方法一次動畫處理多個 CSS 屬性。您只需要在 properties 對像中包含所有要進行動畫處理的屬性即可。例如，您可以同時對元素的寬度和高度進行動畫處理。
jQuery animate 中的 step 函數是一個回調函數，在動畫的每個步驟中都會執行。此函數傳遞兩個參數：now，它是動畫屬性的當前值；fx，它是一個包含有關動畫的信息的對象。您可以使用 step 函數來創建複雜的動畫或調試動畫。
不可以，jQuery animate 方法僅適用於數值 CSS 屬性。如果您嘗試對非數值屬性（如顏色或背景顏色）進行動畫處理，則它將不起作用。但是，您可以使用 jQuery UI 或 jQuery Color 等插件來對這些屬性進行動畫處理。
您可以通過簡單地一個接一個地調用多個 animate 方法來鏈接 jQuery 動畫。 jQuery 將按照調用的順序執行動畫。這稱為“排隊”，它是 jQuery 動畫的一個強大功能。
是的，您可以使用 jQuery animate 方法創建滑動效果。您可以通過對元素的高度或寬度進行動畫處理來實現此目的。但是，jQuery 還提供了 slideDown、slideUp 和 slideToggle 方法，如果您只想創建簡單的滑動效果，則這些方法更容易使用。
有多種方法可以使您的 jQuery 動畫更流暢。一種方法是使用緩動函數，這些函數控制動畫的速度。另一種方法是使用 requestAnimationFrame 方法，該方法允許瀏覽器優化動畫。您還可以通過最大限度地減少 DOM 操作次數並在可能的情況下使用 CSS 轉換來提高性能。
是的，您可以在一組元素上使用 jQuery animate 方法。當您在一個包含多個元素的 jQuery 對像上調用 animate 方法時，動畫將應用於集合中的所有元素。
您可以通過對 opacity 屬性進行動畫處理來使用 jQuery animate 方法創建淡入淡出效果。但是，jQuery 還提供了 fadeIn、fadeOut 和 fadeToggle 方法，如果您只想創建簡單的淡入淡出效果，則這些方法更容易使用。
以上是JQuery Animate（）方法指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
