轻松改善jQuery动画

核心要点

• jQuery 的 animate() 函数虽然实用，但并非高性能动画引擎，可能导致内存消耗和帧率低的问题。然而，对于不熟悉 CSS 动画或寻求跨浏览器兼容性的开发者来说，它仍然是一个可行的选择。
• CSS 动画通常比 jQuery 的动画更快、更高效，这主要归功于 GPU 加速。但是，它们也有一些局限性，包括与旧版 Internet Explorer 的兼容性问题，以及依赖百分比而不是时间来确定动画持续时间，这可能会使调整变得复杂。
• Velocity.js 是一个 jQuery 插件，它可以在无需大幅更改代码的情况下显着提高 jQuery 动画的性能。通过将 $.animate() 替换为 $.velocity()，开发者可以获得更高的帧率并保持 jQuery 的链式调用特性。

我们都曾使用 jQuery 的 animate() 函数在网页上创建出色的效果。然后，随着 CSS3 的引入和兴起，有人告诉我们我们的代码很糟糕。他们建议我们放弃所有基于 jQuery 的动画（以及通常基于 JavaScript 的动画），转而使用基于 CSS 的动画。这种变化迫使我们处理许多浏览器（不）兼容性问题和功能缺失；更不用说无法在旧版 Internet Explorer 上运行它们了。这种痛苦是合理的，因为 CSS 动画比 JavaScript 动画更快。至少他们这么告诉我们的。这是真的吗？ jQuery 的 animate() 函数真的那么慢吗？有没有一种方法可以轻松地增强它而无需更改我们的代码？答案是肯定的。在本文中，我们将了解创建动画的两种方法的一些局限性，然后我们将了解如何使用 jQuery 代码获得更好的性能。

jQuery 的问题是什么？

我们都了解并喜爱 jQuery（实际上有些人并不喜欢）。这个旨在简化 HTML 客户端脚本的库帮助了全世界数十万（并非真实数据）开发者。它使 HTML 文档遍历和操作、事件处理、Ajax 以及更多操作变得轻而易举，减轻了处理所有浏览器的不兼容性和错误的负担。在其功能中，jQuery 还允许创建动画和效果。借助它，我们可以对 CSS 属性进行动画处理、隐藏元素、淡出元素以及其他类似效果。但是，jQuery 的设计目标从来都不是成为一个高性能的动画引擎，它也从未打算支持真正复杂、消耗 CPU/GPU 的动画。作为这一事实的佐证，jQuery 的内存消耗经常会触发垃圾回收，从而在执行动画时造成问题。此外，jQuery 在幕后使用 setInterval() 而不是 requestAnimationFrame()（阅读更多关于 requestAnimationFrame() 的信息）来运行动画，这无助于产生高帧率。由于这些因素，“最了解的人” 提倡使用 CSS 来创建我们的动画和效果。

CSS 动画和过渡

让我们明确一点：CSS 动画优于 jQuery 动画。在谈到动画时，jQuery 的速度可能比 CSS 慢几倍。CSS 动画和过渡具有由 GPU 硬件加速的优势，这在移动像素方面非常出色。尤其是在性能至关重要的场合（例如移动设备）中，这一因素似乎是一个巨大的改进。这太棒了，不是吗？事实是，所有这些都有局限性和问题。第一个限制是并非所有 CSS 属性都可以通过 GPU 进行改进。因此，认为使用 CSS 动画总是会获胜的假设是错误的。另一个问题是 CSS 动画不可移植，至少在您可能定位的所有浏览器中并非如此。例如，过渡在 Internet Explorer 9 及以下版本中不起作用。更糟糕的是，CSS 中的动画目前基于百分比而不是时间（秒或毫秒）。这意味着，除非您使用 Sass 或 Less 等预处理器，否则在完成动画后更改动画持续时间可能会非常痛苦。最后，CSS 动画需要键入大量供应商前缀。是的，我们可以委托一个工具来处理它们，但这只是另一件需要担心的事情。

除了之前的考虑之外，还有其他一些充分的理由不应忽视 jQuery 动画。它们更多地与技能不足有关，而不是技术的弱点本身，但仍然值得一提。如果一个开发者习惯于使用 jQuery 创建动画，那么很有可能该开发者无法使用 CSS 来执行相同的任务。也许开发者需要很长时间才能在 CSS 中创建相同的效果，以至于付出努力不值得获得好处。或者，开发者可能不想学习另一种技术来创建高度可定制的动画。这没有什么可羞愧的。每个人在一个特定领域都有自己的局限性。这里的重点是我们希望使用 jQuery 创建的动画具有更好的性能，这样我们就无需将其转换为 CSS 动画。幸运的是，确实存在解决方案。

改进 jQuery 的 animate() 函数

解决 jQuery 动画问题的答案叫做 Velocity.js。Velocity.js 是 <q cite="https://github.com/julianshapiro/velocity">一个 jQuery 插件，它重新实现了 $.animate() 以产生更高的性能（使 Velocity 也比 CSS 动画库更快），同时包含了改进动画工作流程的新功能。</q> 与使用旧版 IE 的 jQuery 1.X 不同，Velocity 与 IE8 兼容。对于大多数项目来说，这应该不是一个主要问题。此时您可能想知道使用 Velocity.js 会如何影响代码库。答案是“以一种非常荒谬的方式”。为了集成 Velocity.js，我们所要做的就是下载它并将其包含在我们想要使用的网页中。最后一步是将每次出现的 $.animate() 替换为 $.velocity()，无需更改任何参数！此更改就像在我们选择的文本编辑器或 IDE 中执行搜索和替换一样简单。完成后，我们的动画性能将立即得到提升。这很棒，因为我们可以重用我们的知识，而不会对代码库产生太大影响。此外，由于它是一个保持链式调用的 jQuery 插件，我们可以继续创建 jQuery 典型的“方法调用链”。

结论

在本文中，我描述了一些影响基于 jQuery 动画的问题。我们讨论了为什么 CSS 动画在过去几年中被大力推广以替代 jQuery。然后，我强调了 CSS 的一些局限性以及在性能方面的一些缺点。最后，我简要地向您介绍了 Velocity.js，这是一个 jQuery 插件，它允许您几乎无需更改源代码即可提高 JavaScript 动画和效果的性能。本文只是对 jQuery、CSS 和 JavaScript 动画之间比较的介绍。如果您想深入研究此主题，我强烈建议您阅读 GSAP 作者和 Velocity.js 作者撰写的以下文章：- 揭穿神话：CSS 动画与 JavaScript- CSS 与 JS 动画：哪个更快？

关于改进 jQuery 动画的常见问题

如何减慢 jQuery 动画的速度？

可以通过增加动画的持续时间来减慢 jQuery 动画的速度。持续时间在 .animate() 方法中以毫秒为单位指定。例如，如果您想将动画减慢到持续 5 秒，则应编写 $(selector).animate({params}, 5000);。数字越大，动画越慢。

jQuery 动画中缓动起什么作用？

jQuery 动画中的缓动是指动画在其持续时间内不同点处的进度速度。jQuery 提供两种内置的缓动方法：“swing” 和 “linear”。“Swing” 是默认的缓动方法，它使动画在开始和结束时进度较慢，在中间进度较快。“Linear” 另一方面，确保动画在整个过程中速度恒定。

如何提高 jQuery 动画的性能？

提高 jQuery 动画性能的方法有很多。一种方法是在可能的情况下使用 CSS 过渡，因为它们通常比 jQuery 动画性能更好。另一种方法是限制同时运行的动画数量。您还可以使用 requestAnimationFrame 方法，该方法允许浏览器优化动画，从而实现更流畅的动画。

如何停止正在运行的 jQuery 动画？

您可以使用 .stop() 方法停止正在运行的 jQuery 动画。此方法会停止选定元素上当前正在运行的动画。例如，$(selector).stop(); 将停止选定元素上的动画。

如何在 jQuery 中链接多个动画？

您可以通过在同一元素上简单地调用多个动画方法来链接多个 jQuery 动画。例如，$(selector).fadeIn().slideUp(); 将首先淡入选定元素，然后向上滑动它们。jQuery 确保动画按调用的顺序执行。

如何一次在 jQuery 中同时为多个属性设置动画？

您可以通过将包含要为其设置动画的属性的对象传递给 .animate() 方法来一次在 jQuery 中同时为多个属性设置动画。例如，$(selector).animate({height: "300px", width: "200px"}); 将同时为选定元素的高度和宽度设置动画。

如何在 jQuery 动画中使用回调函数？

jQuery 动画中的回调函数是在动画完成后执行的函数。您可以将回调函数作为第二个参数传递给 .animate() 方法。例如，$(selector).animate({params}, function(){ /* 动画完成后要执行的代码 */ });。

如何在 jQuery 中创建自定义动画？

您可以使用 .animate() 方法在 jQuery 中创建自定义动画。此方法允许您为任何 CSS 属性设置动画。例如，$(selector).animate({left: " =50px"}); 将使选定元素向右移动 50 像素。

如何在 jQuery 动画中使用 queue 和 dequeue 方法？

jQuery 中的 queue 和 dequeue 方法用于控制动画的执行。queue 方法允许您将新的动画添加到要对选定元素执行的动画队列中。dequeue 方法允许您删除并执行队列中的下一个函数。

如何在 jQuery 动画中使用 .delay() 方法？

jQuery 中的 .delay() 方法用于延迟队列中后续项目的执行。它通常用于延迟动画。例如，$(selector).delay(500).fadeIn(); 将使 fadeIn 动画延迟 500 毫秒。

以上是轻松改善jQuery动画的详细内容。更多信息请关注PHP中文网其他相关文章！