setTimeout
。在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非常混乱,因为我没有真正地组织好它,但是它有些注释,所以希望你能理解其总体思想。
opacity
淡出当前页面,(2)使用opacity
淡入新页面,(3)使用background-color
淡化页面颜色,(4)使用left
滚动导航栏上的指针(是的,这非常过度,但主要是为了炫耀)。动画应以40FPS运行(超时间隔为25ms),但在较慢的浏览器中,每帧所需时间至少是正常情况下的两倍,并且会出现可见的跳跃。 - Niet the Dark AbsolsetTimeout
无关。你可能想利用这个页面来推广IE9中优秀的Javascript引擎,但如果你希望其他浏览器也能够处理它,你可能需要稍微减弱一下效果。(或者以更好的方式实现它们。不过我不会去查看你混乱的脚本以进行优化 :)) - deceze