Eu tenho várias funções que fazem diferentes animações para diferentes partes do HTML. Eu gostaria de encadear ou enfileirar essas funções para que elas executem as animações sequencialmente e não ao mesmo tempo.

Eu estou tentando automatizar vários eventos em seqüência para parecer que um usuário tem clicado em diferentes botões ou links.

Eu provavelmente poderia fazer isso usando funções de retorno de chamada, mas então eu teria que puxar todas as animações das diferentes funções e reagrupar no padrão certo.

A jquery "queue" ajuda? Eu não conseguia entender odocumentação para a fila.

Exemplo, JQuery:

 function One() {
        $('div#animateTest1').animate({ left: '+=200' }, 2000);
    }
    function Two() {
        $('div#animateTest2').animate({ width: '+=200' }, 2000);
    }

// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
    One();
    Two();

HTML:

    <div id="animatetest" style="width:50px;height:50px;background-color:Aqua;position:absolute;"></div>
    <div id="animatetest2" style="width:50px;height:50px;background-color:red;position:absolute;top:100px;"></div>

Obrigado.

EDIT: eu tentei comtemporizadores mas eu pensei que há uma maneira melhor de fazer isso.

EDIT # 2:

Deixe-me ser mais específico. Tenho várias funções associadas a clicar e passar o mouse em eventos em diferentes elementos da página. Normalmente, essas funções não têm nada a ver uma com a outra (elas não se referem umas às outras). Eu gostaria de simular um usuário passando por esses eventos sem alterar o código das minhas funções existentes.