title: How do I chain or queue custom functions using JQuery?
body: <p>I have multiple functions the do different animations to different parts of the HTML. I would like to chain or queue these functions so they will run the animations sequentially and not at the same time.</p>
  
  <p>I am trying to automate multiple events in sequence to look like a user has been clicking on different buttons or links. </p>
  
  <p>I could probably do this using callback functions but then I would have to pull all of the animations from the different functions and regroup in the right pattern.</p>
  
  <p>Does the jquery "queue" help? I couldn't understand the <a href="http://docs.jquery.com/Core/queue" rel="noreferrer">documentation</a> for the queue.</p>
  
  <p>Example, JQuery:</p>
  
  <pre><code> 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();
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="animatetest" style="width:50px;height:50px;background-color:Aqua;position:absolute;"&gt;&lt;/div&gt;
      &lt;div id="animatetest2" style="width:50px;height:50px;background-color:red;position:absolute;top:100px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thanks.</p>
  
  <p>EDIT: 
  I tried it with <a href="http://plugins.jquery.com/project/timers" rel="noreferrer">timers</a> but I thought there is a better way to do it.</p>
  
  <p>EDIT #2:</p>
  
  <p>Let me be more specific. I have multiple functions bound to click &amp; hover events on different elements of the page. Normally these functions have nothing to do with each other ( they don't reference each other). I would like to simulate a user going through these events without changing the code of my existing functions.</p>