title: jQuery - How to delay form submit until animation is finished?
body: <p>I have this page animation which when the user leaves the page the document slides to the left. However, I also have this form which the user fills in then hits the "Next" button, and I want the submission of the form to wait until the animation is finished (animation e3ms?)</p>
  
  <p>With my mediocre knowledge of JavaScript (especially forms and parsing) I wrote a script which to my knowledge <em>should</em> work, but it's not. Any ideas? Any help would be much appreciated.</p>
  
  <p><b>JavaScript:</b></p>
  
  <pre><code>function ValidateForm() {
      var x = document.forms["myForm"]["myInput"].value;
  
      if(x == null || x == "") {
          $(".error-msg").animate({
              opacity: "1"
          });
  
          return false;
      } else {
          $("body").animate({
              "margin-left": "-200px",
              opacity: "0"
          });
      }
  }
  </code></pre>
  
  <p><b>HTML:</b></p>
  
  <pre><code>&lt;form name="myForm" action="next.html" onsubmit="return ValidateForm();"&gt;
      &lt;input type="text" name="myInput" placeholder="Example: johnnyappleseed@me.com"&gt;
      &lt;span class="error-msg"&gt;You must fill out required elements!&lt;/span&gt;
  
      &lt;input type="submit" value="Next"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><em>CSS code just styles form and sets the .error-msg with an opacity of "0".</em></p>
  
  <p>P.S.: I know JavaScript form validation is dangerous, but once I publish my site I will back it up with PHP or ASP validation on my server, alongside JavaScript validation.</p>