0

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

例如一些简单的 .hide(slow) 就是一个例子。据我了解，JQuery 修改了 HTML 组件的 HTML 代码。没有动画的“.hide”看起来很“明显”，我猜“visibility:none”可以解决问题。

但我猜动画暗示了一些更有趣的东西。第一个想法是一个改变属性的循环，并期望渲染足够快以制作流畅的动画。但这听起来很“CPU滥用”。

它是如何真正做到的？

编辑：我什至不考虑普通的 JS 程序员，所以阅读原始源代码非常困难。我一直在寻找一些“大局”的解释。也许这个词真的不合适。

4

3 回答 3

3

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 做了类似的事情，但是以更加结构化的方式。

于 2012-08-18T04:10:29.803 回答
2

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

你去吧。该站点非常适合查看任何 jQuery 函数的引擎盖下的内容。

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

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

于 2012-08-18T03:56:37.240 回答
1

您可以在 jQueries 站点上找到源代码，以确切了解它是如何在幕后完成的。

编辑：为了增加可读性，请检查GitHub repo。

于 2012-08-18T03:53:45.563 回答