JQuery如何实现动画效果？

Question

JQuery是用JavaScript编写的。作为一个略懂二者的人，我不得不想知道他们是如何编写其中的一些内容的。在纯JavaScript中如何对HTML元素进行动画处理呢？是使用标准DOM操作，反复更新要动画化的CSS属性，并使用回调使其异步执行吗？还是有更高级的方法？

- McGarnagle

---

你应该意识到，你可以打开任何Jquery.js文件并自行查看，对吧？这是官方源代码的全部内容：https://github.com/jquery/jquery/tree/master/src - asawyer

为什么不亲自看看呢？（http://code.jquery.com/jquery-1.7.2.js） - Colin Brock

是的，但是这个来源没有提供技术解释。它只展示了如何操作，而不是为什么要这样做以及类似操作如何在理论上起作用。 - Julius F

Answer 1

jQuery动画只是在定时器上更新CSS属性（这使它异步）。 它们还实现了一个缓动算法，以跟踪动画是否超前或落后计划，并在每个步骤中调整动画的步长，以根据需要赶上或放慢速度。 这允许动画在指定的时间内完成，而不管主机计算机的速度如何。 缺点是慢或繁忙的计算机将显示更多的颠簸动画。

它们还支持缓和函数，控制动画的加速时间/形状。 Linear 意味着恒定的速度。 Swing 是一种更典型的方法，从慢到快，在中间达到最大速度，然后慢慢结束。

因为动画是异步的，所以jQuery还实现了一个动画队列，以便您可以指定多个想看到按顺序执行的动画。 第二个动画在第一个动画完成后开始，依此类推。 jQuery还提供了一个完成函数，因此如果您想要一些自己的代码在动画完成时运行，可以指定一个回调函数，在动画完成时调用该函数。 这允许您在动画完成时执行某些操作，例如启动其他对象的动画，隐藏对象等...

顺便说一下，如果您想了解更多细节，jQuery JavaScript源代码是完全可用的。 工作的核心在本地函数doAnimation()中，尽管大部分工作都在名为step和update的函数中完成，这些函数可以在 jQuery.fx.prototype 的定义中找到。

- jfriend00

Answer 2

就是这样：一个简单的setInterval和一些DOM操作。

当然，代码比这复杂一些。

看看：http://code.jquery.com/jquery-latest.js，在文件末尾附近搜索jQuery.fx.prototype。

- mddw

Answer 3

在进行jQuery动画期间检查元素时，几乎总是会更改CSS代码，该代码是通过jQuery分配给元素的，而不是从您编写的HTML中分配的。如果您还没有适用于Firefox的FireBug，请获取它并在执行动画时检查发生了什么。

- Grigor

Answer 4

没有亲自阅读代码，但据我所知，它确实使用标准的JavaScript方法和属性来定期更新DOM元素和CSS样式（“ticks”），并通过使用标准的setInterval()和setTimeout()方法来实现。

- GregL