核心要點(diǎn)

• jQuery 的 animate() 函數(shù)雖然實(shí)用，但并非高性能動畫引擎，可能導(dǎo)致內(nèi)存消耗和幀率低的問題。然而，對于不熟悉 CSS 動畫或?qū)で罂鐬g覽器兼容性的開發(fā)者來說，它仍然是一個可行的選擇。
• CSS 動畫通常比 jQuery 的動畫更快、更高效，這主要?dú)w功于 GPU 加速。但是，它們也有一些局限性，包括與舊版 Internet Explorer 的兼容性問題，以及依賴百分比而不是時間來確定動畫持續(xù)時間，這可能會使調(diào)整變得復(fù)雜。
• Velocity.js 是一個 jQuery 插件，它可以在無需大幅更改代碼的情況下顯著提高 jQuery 動畫的性能。通過將 $.animate() 替換為 $.velocity()，開發(fā)者可以獲得更高的幀率并保持 jQuery 的鏈?zhǔn)秸{(diào)用特性。

我們都曾使用 jQuery 的 animate() 函數(shù)在網(wǎng)頁上創(chuàng)建出色的效果。然后，隨著 CSS3 的引入和興起，有人告訴我們我們的代碼很糟糕。他們建議我們放棄所有基于 jQuery 的動畫（以及通?；?JavaScript 的動畫），轉(zhuǎn)而使用基于 CSS 的動畫。這種變化迫使我們處理許多瀏覽器（不）兼容性問題和功能缺失；更不用說無法在舊版 Internet Explorer 上運(yùn)行它們了。這種痛苦是合理的，因?yàn)?CSS 動畫比 JavaScript 動畫更快。至少他們這么告訴我們的。這是真的嗎？ jQuery 的 animate() 函數(shù)真的那么慢嗎？有沒有一種方法可以輕松地增強(qiáng)它而無需更改我們的代碼？答案是肯定的。在本文中，我們將了解創(chuàng)建動畫的兩種方法的一些局限性，然后我們將了解如何使用 jQuery 代碼獲得更好的性能。

jQuery 的問題是什么？

我們都了解并喜愛 jQuery（實(shí)際上有些人并不喜歡）。這個旨在簡化 HTML 客戶端腳本的庫幫助了全世界數(shù)十萬（并非真實(shí)數(shù)據(jù)）開發(fā)者。它使 HTML 文檔遍歷和操作、事件處理、Ajax 以及更多操作變得輕而易舉，減輕了處理所有瀏覽器的不兼容性和錯誤的負(fù)擔(dān)。在其功能中，jQuery 還允許創(chuàng)建動畫和效果。借助它，我們可以對 CSS 屬性進(jìn)行動畫處理、隱藏元素、淡出元素以及其他類似效果。但是，jQuery 的設(shè)計(jì)目標(biāo)從來都不是成為一個高性能的動畫引擎，它也從未打算支持真正復(fù)雜、消耗 CPU/GPU 的動畫。作為這一事實(shí)的佐證，jQuery 的內(nèi)存消耗經(jīng)常會觸發(fā)垃圾回收，從而在執(zhí)行動畫時造成問題。此外，jQuery 在幕后使用 setInterval() 而不是 requestAnimationFrame()（閱讀更多關(guān)于 requestAnimationFrame() 的信息）來運(yùn)行動畫，這無助于產(chǎn)生高幀率。由于這些因素，“最了解的人” 提倡使用 CSS 來創(chuàng)建我們的動畫和效果。

CSS 動畫和過渡

讓我們明確一點(diǎn)：CSS 動畫優(yōu)于 jQuery 動畫。在談到動畫時，jQuery 的速度可能比 CSS 慢幾倍。CSS 動畫和過渡具有由 GPU 硬件加速的優(yōu)勢，這在移動像素方面非常出色。尤其是在性能至關(guān)重要的場合（例如移動設(shè)備）中，這一因素似乎是一個巨大的改進(jìn)。這太棒了，不是嗎？事實(shí)是，所有這些都有局限性和問題。第一個限制是并非所有 CSS 屬性都可以通過 GPU 進(jìn)行改進(jìn)。因此，認(rèn)為使用 CSS 動畫總是會獲勝的假設(shè)是錯誤的。另一個問題是 CSS 動畫不可移植，至少在您可能定位的所有瀏覽器中并非如此。例如，過渡在 Internet Explorer 9 及以下版本中不起作用。更糟糕的是，CSS 中的動畫目前基于百分比而不是時間（秒或毫秒）。這意味著，除非您使用 Sass 或 Less 等預(yù)處理器，否則在完成動畫后更改動畫持續(xù)時間可能會非常痛苦。最后，CSS 動畫需要鍵入大量供應(yīng)商前綴。是的，我們可以委托一個工具來處理它們，但這只是另一件需要擔(dān)心的事情。

除了之前的考慮之外，還有其他一些充分的理由不應(yīng)忽視 jQuery 動畫。它們更多地與技能不足有關(guān)，而不是技術(shù)的弱點(diǎn)本身，但仍然值得一提。如果一個開發(fā)者習(xí)慣于使用 jQuery 創(chuàng)建動畫，那么很有可能該開發(fā)者無法使用 CSS 來執(zhí)行相同的任務(wù)。也許開發(fā)者需要很長時間才能在 CSS 中創(chuàng)建相同的效果，以至于付出努力不值得獲得好處。或者，開發(fā)者可能不想學(xué)習(xí)另一種技術(shù)來創(chuàng)建高度可定制的動畫。這沒有什么可羞愧的。每個人在一個特定領(lǐng)域都有自己的局限性。這里的重點(diǎn)是我們希望使用 jQuery 創(chuàng)建的動畫具有更好的性能，這樣我們就無需將其轉(zhuǎn)換為 CSS 動畫。幸運(yùn)的是，確實(shí)存在解決方案。

改進(jìn) jQuery 的 animate() 函數(shù)

解決 jQuery 動畫問題的答案叫做 Velocity.js。Velocity.js 是 <q cite="https://github.com/julianshapiro/velocity">一個 jQuery 插件，它重新實(shí)現(xiàn)了 $.animate() 以產(chǎn)生更高的性能（使 Velocity 也比 CSS 動畫庫更快），同時包含了改進(jìn)動畫工作流程的新功能。</q> 與使用舊版 IE 的 jQuery 1.X 不同，Velocity 與 IE8 兼容。對于大多數(shù)項(xiàng)目來說，這應(yīng)該不是一個主要問題。此時您可能想知道使用 Velocity.js 會如何影響代碼庫。答案是“以一種非?；闹嚨姆绞健薄榱思?Velocity.js，我們所要做的就是下載它并將其包含在我們想要使用的網(wǎng)頁中。最后一步是將每次出現(xiàn)的 $.animate() 替換為 $.velocity()，無需更改任何參數(shù)！此更改就像在我們選擇的文本編輯器或 IDE 中執(zhí)行搜索和替換一樣簡單。完成后，我們的動畫性能將立即得到提升。這很棒，因?yàn)槲覀兛梢灾赜梦覀兊闹R，而不會對代碼庫產(chǎn)生太大影響。此外，由于它是一個保持鏈?zhǔn)秸{(diào)用的 jQuery 插件，我們可以繼續(xù)創(chuàng)建 jQuery 典型的“方法調(diào)用鏈”。

結(jié)論

在本文中，我描述了一些影響基于 jQuery 動畫的問題。我們討論了為什么 CSS 動畫在過去幾年中被大力推廣以替代 jQuery。然后，我強(qiáng)調(diào)了 CSS 的一些局限性以及在性能方面的一些缺點(diǎn)。最后，我簡要地向您介紹了 Velocity.js，這是一個 jQuery 插件，它允許您幾乎無需更改源代碼即可提高 JavaScript 動畫和效果的性能。本文只是對 jQuery、CSS 和 JavaScript 動畫之間比較的介紹。如果您想深入研究此主題，我強(qiáng)烈建議您閱讀 GSAP 作者和 Velocity.js 作者撰寫的以下文章：- 揭穿神話：CSS 動畫與 JavaScript- CSS 與 JS 動畫：哪個更快？

關(guān)于改進(jìn) jQuery 動畫的常見問題

如何減慢 jQuery 動畫的速度？

可以通過增加動畫的持續(xù)時間來減慢 jQuery 動畫的速度。持續(xù)時間在 .animate() 方法中以毫秒為單位指定。例如，如果您想將動畫減慢到持續(xù) 5 秒，則應(yīng)編寫 $(selector).animate({params}, 5000);。數(shù)字越大，動畫越慢。

jQuery 動畫中緩動起什么作用？

jQuery 動畫中的緩動是指動畫在其持續(xù)時間內(nèi)不同點(diǎn)處的進(jìn)度速度。jQuery 提供兩種內(nèi)置的緩動方法：“swing” 和 “l(fā)inear”。“Swing” 是默認(rèn)的緩動方法，它使動畫在開始和結(jié)束時進(jìn)度較慢，在中間進(jìn)度較快?！癓inear” 另一方面，確保動畫在整個過程中速度恒定。

如何提高 jQuery 動畫的性能？

提高 jQuery 動畫性能的方法有很多。一種方法是在可能的情況下使用 CSS 過渡，因?yàn)樗鼈兺ǔ１?jQuery 動畫性能更好。另一種方法是限制同時運(yùn)行的動畫數(shù)量。您還可以使用 requestAnimationFrame 方法，該方法允許瀏覽器優(yōu)化動畫，從而實(shí)現(xiàn)更流暢的動畫。

如何停止正在運(yùn)行的 jQuery 動畫？

您可以使用 .stop() 方法停止正在運(yùn)行的 jQuery 動畫。此方法會停止選定元素上當(dāng)前正在運(yùn)行的動畫。例如，$(selector).stop(); 將停止選定元素上的動畫。

如何在 jQuery 中鏈接多個動畫？

您可以通過在同一元素上簡單地調(diào)用多個動畫方法來鏈接多個 jQuery 動畫。例如，$(selector).fadeIn().slideUp(); 將首先淡入選定元素，然后向上滑動它們。jQuery 確保動畫按調(diào)用的順序執(zhí)行。

如何一次在 jQuery 中同時為多個屬性設(shè)置動畫？

您可以通過將包含要為其設(shè)置動畫的屬性的對象傳遞給 .animate() 方法來一次在 jQuery 中同時為多個屬性設(shè)置動畫。例如，$(selector).animate({height: "300px", width: "200px"}); 將同時為選定元素的高度和寬度設(shè)置動畫。

如何在 jQuery 動畫中使用回調(diào)函數(shù)？

jQuery 動畫中的回調(diào)函數(shù)是在動畫完成后執(zhí)行的函數(shù)。您可以將回調(diào)函數(shù)作為第二個參數(shù)傳遞給 .animate() 方法。例如，$(selector).animate({params}, function(){ /* 動畫完成后要執(zhí)行的代碼 */ });。

如何在 jQuery 中創(chuàng)建自定義動畫？

您可以使用 .animate() 方法在 jQuery 中創(chuàng)建自定義動畫。此方法允許您為任何 CSS 屬性設(shè)置動畫。例如，$(selector).animate({left: " =50px"}); 將使選定元素向右移動 50 像素。

如何在 jQuery 動畫中使用 queue 和 dequeue 方法？

jQuery 中的 queue 和 dequeue 方法用于控制動畫的執(zhí)行。queue 方法允許您將新的動畫添加到要對選定元素執(zhí)行的動畫隊(duì)列中。dequeue 方法允許您刪除并執(zhí)行隊(duì)列中的下一個函數(shù)。

如何在 jQuery 動畫中使用 .delay() 方法？

jQuery 中的 .delay() 方法用于延遲隊(duì)列中后續(xù)項(xiàng)目的執(zhí)行。它通常用于延遲動畫。例如，$(selector).delay(500).fadeIn(); 將使 fadeIn 動畫延遲 500 毫秒。

以上是輕松改善jQuery動畫的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！