Eu tenho uma sequência de animação complexa envolvendo desbotamentos e transições em JavaScript. Durante esta sequência, que consiste em quatro elementos que mudam ao mesmo tempo, umsetTimeout é usado em cada elemento.

Testada no Internet Explorer 9, a animação funciona em velocidade real (deve levar 1,6 segundos e exatamente 1,6 segundos). QUALQUER outro navegador terá um atraso horrível, com tempos de animação de 4 segundos (Firefox 3 e 4, Chrome, Opera) e algo como 20 segundos no IE 8 e abaixo.

Como o IE9 pode ser tão rápido enquanto todos os outros navegadores estão presos na lama?

Tentei encontrar maneiras de mesclar os elementos em um, para ter um setTimeout a qualquer momento, mas, infelizmente, não suportaria nenhuma interferência (como clicar em um link diferente para iniciar uma nova animação antes do atual foi finalizado).

EDIT: Para elaborar em resposta a comentários, aqui está o esboço do código:

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);
}

Cada uma das quatro funções progride o desbotamento em um quadro e, em seguida, define outro tempo limite com o argumento incrementado, até o final da animação.

Você pode ver a página emhttp://adamhaskell.net/cw/index.html (Nome de usuário: knockknock; Senha: goaway) (possui som e música, que podem ser desabilitados, mas avise!) - meu JavaScript é muito confuso, pois eu não o organizei adequadamente, mas é comentado com alguma esperança você pode ver qual é a ideia geral.