title: Delay page change on Submit - jQuery
body: <p>Header</p>
  
  <pre><code>    $(document).ready(function() {
          $('#user_box').animate({width: "263px"}, "slow");
  
          $('#submit').click(function(){
              $('#user_box').animate({width: "0px"}, "slow");
          });
      });
  </code></pre>
  
  <p>Content</p>
  
  <pre><code>            &lt;div id="user_box"&gt;
                  &lt;form name="login_form" id="login_form" method="post" action="index.php"&gt;
                      Username:&lt;br /&gt;
                      &lt;input type="text" name="username"&gt;&lt;br /&gt;
                      &lt;input type="submit" value="Submit" id="submit" /&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, I've made it do when submit is clicked, the user_box animates back to 0pxs (slides right). Problem is I need to delay the page load by about 1 second to give the animation time to finish. But only when the Submit button is clicked. How can I delay the page to allow the animation to finish?</p>
  
  <p>I've tried..</p>
  
  <pre><code>        $('#submit').delay(3500, function(){
              window.location = toLoad;
          });
  </code></pre>
  
  <p>with no joy. Any help would be greatly appreciated. Thank you.</p>
  
  <p>p.s. The general idea is the user_box slides right with each query and return left with result. It'll be mainly PHP, hence the on page load it slide right to left. I'll wangle something later to stop it happening when logged in or something.</p>