javascript - 使用间隔使用 javascript 更改多个属性？

Question

我正在尝试实现类似于 jQuery Glow 的东西或 this fiddle .

具体来说，我正在考虑加载时开始并持续 10 秒，javascript 以 100 毫秒的间隔执行。应该发生的是背景颜色或元素 A 将使用渐变范围(开始 #000 和结束 #fff)发生变化，而元素 B 的不透明度将发生变化(开始 0 和结束 1)。因此，每 100 毫秒不透明度将增加 1(0.01、0.02、...、1.0)并结束。一直以来，元素 A 的背景将沿着从 #000 到 #fff 的渐变。

我可以通过 jQuery Glow 看出这个功能应该不会太难，但将它拼凑在一起并不能证明那么直观。该 js 看起来非常适合悬停和链接，而不是定义不同的 onLoad 值并在预定时间结束。

我该怎么做？谢谢。

Answer 1

setTimeout 不再是您在 JavaScript 动画中的唯一选择。

查看 HTML5Rocks 中的 setAnimationFrame，作者 Paul Irish。了解一下 here .

buttery smooth 60 frames per second.

Scroll this page , 和...

avoid animations that result in reflow-repaint loops; update your rAF calls to expect a high resolution timestamp as the first parameter;

最后，

Get the full rundown of this at: requestAnimationFrame API: now with sub-millisecond precision

此外，nnnnnn 是正确的。 jQuery 的一个主要优势是效果。

但是，JSWorld 不仅仅是 jQuery，还有更多。

对于初学者，请查看 CreativeJS.com .

它是 WebGL，但更重要的是:three.js(关注@mrdoob)。

ExtJS只是企业级 UI，动画交互。

和Raphael是目前最先进的 SVG。

其他值得一提的图形解决方案是:D3.js、HTML5 Canvas 和 CSS3 Transforms。

编辑:I thought Adobe Edge was cool .它是 HTML Animation Generation 中的一个全新隐喻，具有关键帧界面……接受，批评者无法通过 beta 的非语义 DIV。我想我们会从该团队那里听到更多关于一些高级 HTML 动画生成器的信息... Yup, they got some new stuff!

希望对您有所帮助。一切顺利!纳什