title: Show loader animation for 2-3 seconds and then process - .ajaxStart and .ajaxStop
body: <p>How can I show the loader animation for 3 seconds an then process the process.php?
  I have tried it with the setTimeout() Method in the ajaxStart block and ajaxStop block, but that doesnt work.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  
  $('#loading')
  .hide()  // hide it initially
  .ajaxStart(function() {
      $(this).show();
  })
  .ajaxStop(function() {
      $(this).hide();
  });
  
      $("#myform").validate({
          debug: false,
          rules: {
              name: "required",
              email: {
                  required: true,
                  email: true
              }
          },
          messages: {
              name: "Please let us know who you are.",
              email: "A valid email will help us get in touch with you.",
          },
          submitHandler: function(form) {
              // do other stuff for a valid form
              $.post('process.php', $("#myform").serialize(), function(data) {
  
              $('#results').html(data);
              });
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is the form:</p>
  
  <pre><code>&lt;form name="myform" id="myform" action="" method="POST"&gt;  
  &lt;!-- The Name form field --&gt;
      &lt;label for="name" id="name_label"&gt;Name&lt;/label&gt;  
      &lt;input type="text" name="name" id="name" size="30" value=""/&gt;  
      &lt;br&gt;
  &lt;!-- The Email form field --&gt;
      &lt;label for="email" id="email_label"&gt;Email&lt;/label&gt;  
      &lt;input type="text" name="email" id="email" size="30" value=""/&gt; 
      &lt;br&gt;
  &lt;!-- The Submit button --&gt;
      &lt;input type="submit" name="submit" value="Submit"&gt; 
  &lt;/form&gt;
  &lt;!-- We will output the results from process.php here --&gt;
  &lt;div id="results"&gt;&lt;div&gt;
  
  &lt;div id="loading"&gt;Loading&lt;/div&gt;
  </code></pre>