title: Why does jQuery .animate callback occur before the animation?
body: <p>Why is the callback on this <code>.animate</code> function happening, before the animation?</p>
  
  <p>Refer: <a href="http://jsfiddle.net/93Qyq/7/" rel="nofollow">http://jsfiddle.net/93Qyq/7/</a></p>
  
  <p>This is the Javascript portion:</p>
  
  <pre><code>$('#clickButton').click(function() {
    $('.spanClass').animate({
      left: '+=200'
    }, 500, positionReset());
  });
  
  function positionReset(){
      alert('complete!');
     $('.spanClass').animate({'left':'-=200'})
  }
  </code></pre>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;div class="divClass"&gt;
  &lt;span id="a" class="spanClass"&gt;A&lt;/span&gt;
  &lt;span id="b" class="spanClass"&gt;B&lt;/span&gt;
  &lt;span id="c" class="spanClass"&gt;C&lt;/span&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div id="clickButton"&gt;CLICK BUTTON&lt;/div&gt;&lt;br&gt;​
  </code></pre>
  
  <p>​</p>