¿Cómo encadeno o pongo en cola las funciones personalizadas utilizando JQuery?

Tengo múltiples funciones que hacen diferentes animaciones a diferentes partes del HTML. Me gustaría encadenar o poner en cola estas funciones para que ejecuten las animaciones secuencialmente y no al mismo tiempo.

Estoy tratando de automatizar múltiples eventos en secuencia para que parezca que un usuario ha estado haciendo clic en diferentes botones o enlaces.

Probablemente podría hacer esto usando las funciones de devolución de llamada, pero luego tendría que extraer todas las animaciones de las diferentes funciones y reagruparlas en el patrón correcto.

¿Ayuda la cola "jquery"? No pude entender eldocumentación para la cola.

Ejemplo, 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>

Gracias.

EDITAR: lo intenté contemporizadores Pero pensé que hay una mejor manera de hacerlo.

EDITAR # 2:

Déjame ser más específico. Tengo múltiples funciones destinadas a hacer clic y desplazar eventos en diferentes elementos de la página. Normalmente estas funciones no tienen nada que ver entre sí (no se refieren entre sí). Me gustaría simular que un usuario pase por estos eventos sin cambiar el código de mis funciones existentes.

Respuestas a la pregunta(15)

Su respuesta a la pregunta