JQuery的幕后效果

我正在学习JQuery的一些基础知识。当我了解某件事时，我总是试图想象幕后是如何运作的，但我无法想象某些效果是如何实现的

例如，simple.hide（slow）就是一个例子。据我所知，JQuery修改HTML组件的HTML代码。没有动画的“.hide”看起来很“明显”，我想“可见性：无”就可以了

但我想动画意味着更有趣的东西。第一个想法是一个循环，可以更改属性，并期望渲染足够快，以生成平滑的动画。但这听起来相当“滥用CPU”

到底是怎么做到的

编辑：我甚至不考虑一个普通的JS程序员，所以阅读原始的源代码是相当困难的。我在寻找一些“大局”的解释。也许这个词真的不被认可。

你可以找到正确的答案，看看幕后是怎么做的

编辑：要获得额外的可读性，请查看。

您可以找到，以查看幕后的具体操作

编辑：要获得额外的可读性，请检查。

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

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

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

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

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

---

想想看电影。比如说《哈利·波特》和一个他们必须成为演员的场景。他们会怎么做？他们需要每单位时间增加演员的透明度，直到透明度达到100%。在hide（slow）的情况下，假设这大约是1000毫秒（我没有费心查找）。因此，对象的透明度需要在1秒内从0%变为100%。所以他们需要每100分之一秒降低1%的透明度才能达到这个效果。对于一般的奔腾133来说，这将是相当cpu密集型的（我仍然有高中时的电脑——这将是一个很好的测试，看看它如何响应），但不是一个现代处理器。但是，如果你的页面上满是jQuery动画，你就会开始注意到速度变慢了。

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();​

var-element=document.getElementById（'element'）；
var最大值=200；
var区间=5；
左向量=10；
函数animate（）{
如果（左<最大值）{
左+=1-数学功率（左/最大，5）；
element.style.left=left+'px'；
设置超时（动画、间隔）；
}
}
制作动画（）；​

还有一个工作演示：

---

jQuery也做了类似的事情，但以一种更加结构化的方式。

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();​

var-element=document.getElementById（'element'）；
var最大值=200；
var区间=5；
左向量=10；
函数animate（）{
如果（左<最大值）{
左+=1-数学功率（左/最大，5）；
element.style.left=left+'px'；
设置超时（动画、间隔）；
}
}
制作动画（）；​

还有一个工作演示：

---

jQuery也有类似的功能，但结构更为结构化。

是的，GitHub应该是我的第一个想法，更易于阅读。是的，GitHub应该是我的第一个想法，更易于阅读。感谢您的简化。我有这个想法，但我认为可能会有比杀死CPU（可能使用GPU？）更“优雅”的解决方案。编辑：使用pow的非线性效果很好。像Chrome这样的浏览器实际上使用硬件加速和GPU来进行大量渲染。@Vic:据我所知，只有

-webkit transition

使用GPU加速。你可以得到一个polyfill，它可以自动使用CSS3使用

transition

来设置元素的动画，但这不是默认情况。我没有用任何具体的东西来支持我的（可能是错误的）主张，所以我可能是错的。@peterRit-这种事情不需要杀死CPU。对于

.hide（'slow'）

的原始示例，总共20帧动画足以使其平滑。如果您一次只运行几个动画，CPU甚至不会注意到…感谢您的简化。我有这个想法，但我认为可能会有比杀死CPU（可能使用GPU？）更“优雅”的解决方案。编辑：使用pow的非线性效果很好。像Chrome这样的浏览器实际上使用硬件加速和GPU来进行大量渲染。@Vic:据我所知，只有

-webkit transition

使用GPU加速。你可以得到一个polyfill，它可以自动使用CSS3使用

transition

来设置元素的动画，但这不是默认情况。我没有用任何具体的东西来支持我的（可能是错误的）主张，所以我可能是错的。@peterRit-这种事情不需要杀死CPU。对于

.hide（'slow'）

的原始示例，总共20帧动画足以使其平滑。如果一次只运行几个动画