Question

我正在学习一些关于JQuery的基础知识。当我了解某些事情时，我总是试着想象幕后是如何运作的，但我不会想象一些效果是如何完成的。

例如，一些简单的.hide（慢）就是一个例子。据我了解，JQuery修改了HTML组件的HTML代码。没有动画的“.hide”似乎非常“明显”，我猜“可见性：无”会做到这一点。

但是动画意味着我觉得更有趣。第一个想法是一个循环，它改变了属性，并期望渲染速度足以制作流畅的动画。但这听起来很“CPU滥用”。

它是如何完成的？

编辑：我甚至不考虑普通的JS程序员，因此阅读原始源代码非常困难。我正在寻找一些“大图片”的解释。也许真的这个词并不合适。

Answer 1

jQuery的源代码有点太高级，无法轻松理解，所以从头开始编写一个简单的动画可能更容易：

var element = document.getElementById('element');
var maximum = 200;
var interval = 5;
var left = 10;

function animate() {
    if (left < maximum) {
        left += 1 - Math.pow(left / maximum, 5);
        element.style.left = left + 'px';

        setTimeout(animate, interval);
    }
}

animate();

一个有效的演示：http://jsfiddle.net/QB8C7/3/。

jQuery做了类似的事情，但结构更加结构化。

Answer 2

http://james.padolsey.com/jquery/#v=1.7.2&fn=jQuery.fn.hide

你去吧。该网站非常适合查看任何jQuery功能的引擎盖。

在编辑问题后编辑我的回复 -

想一部电影。让我们说哈利波特和他们必须制作演员的场景disapparate。他们会怎么做？他们需要在每个单位时间内提高演员的透明度，直到透明度达到100％。在hide（慢）的情况下，假设大约1000毫秒（我没有费心去查找它）。因此，对象的透明度需要在1秒内从0％变为100％。因此，他们需要每100秒将透明度降低1％才能达到这种效果。对于普通的Pentium 133来说，这将是相当大的cpu密集型的（我仍然拥有高中时的计算机 - 它是一个很好的测试，看它如何响应），但不是现代处理器。如果你有一个填充了jQuery动画的页面，那么你会开始注意到减速。

Answer 3

您可以找到source code on jQueries site以查看完全如何在幕后完成。

编辑：为了提高可读性，请查看GitHub repo。

幕后的JQuery效果

3 个答案: