title: Run an animation before I submit a form (and make sure it completes)
body: <p>So I have a little form (<code>#edit_form</code>) with elements from a database. The checked elements are assigned the class <code>.selected</code>, and when the user submits the form, I want them to slide up before the form is actually submitted and the page reloads. I have tried this:</p>
  
  <pre><code>$("#edit_form").submit(function(){
      $('.selected').slideUp(800,function(){
          $("#edit_form").submit();
      });
  });
  </code></pre>
  
  <p>The problem is that the form just submits, and doesn't wait until the animation is complete. I have also tried this:</p>
  
  <pre><code>$("#edit_form").submit(function(e){
      e.preventDefault();
      $('.selected').slideUp(800,function(){
          $("#edit_form").submit();
      });
  });
  </code></pre>
  
  <p>This makes the animation fire, but the form is never submitted. Here is another one I tried (the submit button has an id of <code>#formsubmit</code>):</p>
  
  <pre><code>$("#formsubmit").click(function(e){
      e.preventDefault();
      $('.selected').slideUp(800,function(){
          $("#edit_form").submit();
      });
  });
  </code></pre>
  
  <p>I have tried that with and without the <code>preventDefault()</code>, and they both do the same as if I am trying to intercept the form submit action. Anybody have any other ideas?</p>