我有一个复杂的动画序列,涉及 JavaScript 中的淡入淡出和过渡。在这个由四个同时变化的元素组成的序列中,setTimeout
每个元素都使用 a。
在 Internet Explorer 9 中进行了测试,动画以实时速度运行(应该需要 1.6 秒,而恰好需要 1.6 秒)。任何其他浏览器都会严重滞后,动画时间为 4 秒(Firefox 3 和 4、Chrome、Opera),在 IE 8 及更低版本中为 20 秒。
在所有其他浏览器都陷入泥潭的情况下,IE9 怎么能跑得这么快?
我试图找到将元素合并为一个的方法,以便在任何给定时间都有一个 setTimeout,但不幸的是它无法承受任何干扰(例如单击不同的链接以在当前一个已经完成)。
编辑:为了回应评论,这里是代码的大纲:
link.onclick = function() {
clearTimeout(colourFadeTimeout);
colourFadeTimeout = setTimeout("colourFade(0);",25);
clearTimeout(arrowScrollTimeout);
arrowScrollTimeout = setTimeout("arrowScroll(0);",25);
clearTimeout(pageFadeOutTimeout);
pageFadeOutTimeout = setTimeout("pageFadeOut(0);",25);
clearTimeout(pageFadeInTimeout);
pageFadeInTimeout = setTimeout("pageFadeIn(0);",25);
}
四个函数中的每一个都将淡入淡出一帧,然后设置另一个超时,参数递增,直到动画结束。
您可以在http://adamhaskell.net/cw/index.html看到页面(用户名:knockknock;密码:goaway)(它有声音和音乐,可以禁用,但要注意!) - 我的 JavaScript 非常凌乱,因为我没有真正正确地组织它,但它被评论了一点,所以希望你能看到一般的想法是什么。