title: jQuery fade page out before posting form action
body: <p>I've got to fade the page out before posting the form action. I'm not sure if this is even possible, so I don't know where to begin.</p>
  
  <p>That said, I <em>do</em> know how to do it for links... javascript below. Thanks for your help!</p>
  
  <p>HTML form I need to intercept the post method from</p>
  
  <pre><code>&lt;form id="postitron" method="post" action="/postitron/answertron.php"&gt;
  </code></pre>
  
  <p>JavaScript I've used for <code>anchor</code> tags</p>
  
  <pre><code>var $linkLocation;
  
  function redirectPage(){
      window.location = $linkLocation;
  }
  
  $('a.transition').click(function(event){
      event.preventDefault();
      $linkLocation = this.href;
      $('#page').animate({opacity:0},400, function(){
          redirectPage();
      });
  });
  </code></pre>
  
  <hr>
  
  <p>UPDATE:</p>
  
  <p>So many answers! Thank you!</p>
  
  <p>I've implemented the gist of what was recommended across the board and am getting an infinite loop of animation.. what am I missing?</p>
  
  <p>I've made a JSFiddle to demonstrate... it doesn't animate in an infinite loop... but it doesn't return a 404 either. Weird!?</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>
  
  <hr>
  
  <p>UPDATE #2</p>
  
  <p>@Ahren suggested that @Priyank Patel's use of the .one() method would prevent the animation from looping infinitely, which it did (yay!), but my console is now returning an error that's preventing the form submission:</p>
  
  <p>Uncaught TypeError: Property 'submit' of object # is not a function </p>
  
  <p>Here's the updated JavaSript</p>
  
  <pre><code>$('#postitron').one('submit', function(e){
      e.preventDefault();
      $('#page').animate({opacity:0},400, function(){
          $('#postitron').submit();
      });
  });
  </code></pre>
  
  <hr>
  
  <p>Update #3</p>
  
  <p>Further thought on it... The .one() method executes the handler once for the element.. is that preventing the same submit() method from being executed once the animation fades?</p>
  
  <hr>
  
  <p>Update #4</p>
  
  <p><a href="https://stackoverflow.com/questions/10714467/jquery-animate-in-infinite-loop">jQuery animate in infinite loop</a></p>