title: jQuery animate in infinite loop
body: <p>I'm trying to make this happen:</p>
  
  <ol>
  <li><p>prevent a submit button from submitting the form</p></li>
  <li><p>fade an element out</p></li>
  <li><p>then submitting the form</p></li>
  </ol>
  
  <p>But am stuck with an infinite loop of animation! Why??</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form id="postitron" method="post" action="/postitron/answertron.php"&gt;
    &lt;input type="hidden" name="acces" value"yes"&gt;
    &lt;input id="submit" type="submit" value="DOIT"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$('#postitron').submit(function(e){
      e.preventDefault();
      $('#page').animate({opacity:0},400, function(){
          $('#postitron').submit();
      });
  });
  </code></pre>
  
  <p>P.S.- I've also tried the <code>.one()</code> method instead of <code>.submit()</code>, but it prevents the submit method from being executed on #postitron once the animation's complete :(</p>