JQuery如何做动画？

Question

JQuery是用Javascript编写的。作为每个人都知道一点的人，我不得不想他们是如何写出一些的。你如何在纯Javascript中为HTML元素添加动画？它只是反复更新要动画的CSS属性，使用标准的DOM操作，使用回调使其异步？还是更复杂一些？

Answer 1

jQuery动画只是更新循环定时器的CSS属性（这使得它是异步的）。

他们还实现了补间算法，该算法可以跟踪动画是提前还是落后于计划，并且可以根据需要调整每个步骤的动画步长以赶上或减慢。这允许动画在指定的时间内完成，而不管主机有多快。不足之处在于慢速或繁忙的计算机会显示更多不连贯的动画。

它们还支持控制动画加速的时间/形状的缓动功能。 Linear意味着恒定的速度。 Swing是一个比较典型的，启动缓慢，中间加速到最大速度，然后慢慢结束。

由于动画是异步的，因此jQuery还实现了一个动画队列，以便您可以指定要看到的多个动画。第二个动画从第一个动画完成时开始，等等。 jQuery还提供了一个完成函数，所以如果你想在动画完成时运行一些你自己的代码，你可以指定一个回调函数，当动画完成时这个函数会被调用。这允许您在动画完成时执行一些操作，例如开始其他对象的动画，隐藏对象等等。

仅供参考，如果您需要更多详细信息，请参阅jQuery javascript source code。这项工作的核心是一个名为doAnimation()的本地函数，尽管大部分工作都是在step和update函数中完成的，可以在jQuery.fx.prototype的定义中找到。

Answer 2

在jQuery动画期间检查元素时，几乎总是会更改CSS代码，该代码通过jQuery分配给该元素，而该代码并非真正从您编写的HTML分配的元素。如果你没有用于firefox，并且在动画执行时检查发生了什么，那么获取一个FireBug。

Answer 3

根据我的理解，它确实使用标准的JavaScript方法和属性来定期更新DOM元素和CSS样式（“ticks”），它使用标准的setInterval()和setTimeout()方法完成。

Answer 4

就是这样：一个普通的旧setInterval和一些DOM操作。

当然，代码比这更复杂一点。

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