搜尋
首頁web前端js教程JQuery Animate()方法指南

A Guide to the jQuery animate() Method

核心要點

  • 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:

<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>(具有類 <code>.square-small)。該值基於我們使用前面列出的 CSS 代碼設置的容器寬度。此解決方案不是很靈活,因為如果我們更改容器的寬度,內部<div> 將無法到達另一側(如果我們在容器上設置更寬的寬度),或者將超過它(如果我們設置更窄的寬度)。一種解決方案是根據外部和內部 <code><div> 的當前寬度的計算來設置 <code>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 參數(第二種形式的第二個參數)的 startcompleteprogress 屬性。目的是在動畫運行時禁用單擊時運行動畫的按鈕。之後,我們想顯示動畫完成百分比。對於此示例,我們將修改我們構建的第一個演示。根據描述,我們必須添加一個按鈕和一個元素(我們將使用一個 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 方法,它是如何工作的?

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 還提供了 slideDownslideUpslideToggle 方法,如果您只想創建簡單的滑動效果,則這些方法更容易使用。

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

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

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

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

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

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

以上是JQuery Animate()方法指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
在JavaScript中替換字符串字符在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

構建您自己的Ajax Web應用程序構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此,在這裡,您準備好了解所有稱為Ajax的東西。但是,到底是什麼? AJAX一詞是指用於創建動態,交互式Web內容的一系列寬鬆的技術。 Ajax一詞,最初由Jesse J創造

10個JQuery Fun and Games插件10個JQuery Fun and Games插件Mar 08, 2025 am 12:42 AM

10款趣味橫生的jQuery遊戲插件,讓您的網站更具吸引力,提升用戶粘性!雖然Flash仍然是開發休閒網頁遊戲的最佳軟件,但jQuery也能創造出令人驚喜的效果,雖然無法與純動作Flash遊戲媲美,但在某些情況下,您也能在瀏覽器中獲得意想不到的樂趣。 jQuery井字棋遊戲 遊戲編程的“Hello world”,現在有了jQuery版本。 源碼 jQuery瘋狂填詞遊戲 這是一個填空遊戲,由於不知道單詞的上下文,可能會產生一些古怪的結果。 源碼 jQuery掃雷遊戲

如何創建和發布自己的JavaScript庫?如何創建和發布自己的JavaScript庫?Mar 18, 2025 pm 03:12 PM

文章討論了創建,發布和維護JavaScript庫,專注於計劃,開發,測試,文檔和促銷策略。

jQuery視差教程 - 動畫標題背景jQuery視差教程 - 動畫標題背景Mar 08, 2025 am 12:39 AM

本教程演示瞭如何使用jQuery創建迷人的視差背景效果。 我們將構建一個帶有分層圖像的標題橫幅,從而創造出令人驚嘆的視覺深度。 更新的插件可與JQuery 1.6.4及更高版本一起使用。 下載

Matter.js入門:簡介Matter.js入門:簡介Mar 08, 2025 am 12:53 AM

Matter.js是一個用JavaScript編寫的2D剛體物理引擎。此庫可以幫助您輕鬆地在瀏覽器中模擬2D物理。它提供了許多功能,例如創建剛體並為其分配質量、面積或密度等物理屬性的能力。您還可以模擬不同類型的碰撞和力,例如重力摩擦力。 Matter.js支持所有主流瀏覽器。此外,它也適用於移動設備,因為它可以檢測觸摸並具有響應能力。所有這些功能都使其值得您投入時間學習如何使用該引擎,因為這樣您就可以輕鬆創建基於物理的2D遊戲或模擬。在本教程中,我將介紹此庫的基礎知識,包括其安裝和用法,並提供一

使用jQuery和Ajax自動刷新DIV內容使用jQuery和Ajax自動刷新DIV內容Mar 08, 2025 am 12:58 AM

本文演示瞭如何使用jQuery和ajax自動每5秒自動刷新DIV的內容。 該示例從RSS提要中獲取並顯示了最新的博客文章以及最後的刷新時間戳。 加載圖像是選擇

如何在瀏覽器中優化JavaScript代碼以進行性能?如何在瀏覽器中優化JavaScript代碼以進行性能?Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略,重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
2 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
2 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。