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

【问题标题】：Changing multiple attributes using javascript using intervals?使用 javascript 使用间隔更改多个属性？
【发布时间】：2012-06-21 06:19:13
【问题描述】：

我正在尝试实现类似于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 并在预定时间结束。

我怎么能这样做？谢谢。

【问题讨论】：

你看过jQuery的.animate()方法吗？
+1 以获得漂亮的链接。非常适合我目前的任务

标签： javascript jquery glow

【解决方案1】：

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

查看由 Paul Irish 编写的 HTML5Rocks 中的 setAnimationFrame。阅读它here。

每秒 60 帧的流畅度。

Scroll this page，还有……

避免导致回流-重绘循环的动画；更新您的 rAF 要求将高分辨率时间戳作为第一个参数的调用；

最后，

在以下位置获取完整的概要：requestAnimationFrame API：现在使用 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 动画生成中的全新隐喻，具有关键帧界面……接受，批评者无法超越 beta 版的非语义 DIV。我想我们会从那个团队那里听到更多关于一些高级 HTML 动画生成器的信息……Yup, they got some new stuff!

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

【讨论】：

是的，我曾经也被非语义 div 所吸引。特别是因为有很多次我不需要一个。然后我会注意到这个很酷的 js 并看一看，它是围绕单个元素的四个 div 包装器。最终我克服了这个问题，只是说如果我不打算自己学习所有的 js，它会随着领土而来。
+1 给你先生。好点子。可以想象在关键帧上自然演变为 HTML5 和 CSS3 自动化。即，div-itus，不太必要。谢谢。纳什

【解决方案2】：

尝试Fading Effects 并将其与setTimeout 一起使用。您必须进行一些实验，我认为它会起作用:)

【讨论】：