title: Delay jQuery Ajax loader for 3 seconds after submit button is pushed
body: <p>I'm  using a simple jQuery to show an animation DIV created with CSS after SUBMIT button is pushed. My issue is that when the server response is fast, the DIV is shown for justs some milliseconds. I'd like to display it for at least 3 seconds, regardless if the server response is fast or slow.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form class="search_cars" action="http://www.domain.com/searchresults" method="get"&gt;
  
      &lt;label&gt;
          &lt;select name="model"&gt;
              &lt;option value="" selected="selected"&gt;Select Make&lt;/option&gt;
              &lt;option value="Acura"&gt;Acura&lt;/option&gt;
              &lt;option value="..."&gt;...&lt;/option&gt;
          &lt;/select&gt;
      &lt;/label&gt;
  
      &lt;label&gt;
          &lt;select name="type"&gt;
              &lt;option value="" selected="selected"&gt;All Models&lt;/option&gt;
              &lt;option value="..."&gt;..models script...&lt;/option&gt;
          &lt;/select&gt;
      &lt;/label&gt;
  
      &lt;label&gt;&lt;input name="zip" type="tel" maxlength="5" id="zip" placeholder="zip code" /&gt;&lt;/label&gt;
  
      &lt;label&gt;&lt;input name="submit" type="submit" value="search" class="search_button" /&gt;&lt;/label&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>jQUERY:</strong></p>
  
  <pre><code>$(".search_button").click(function(e) {
      $('#loadingProgressG').show();
      $.ajax({
          success: function(data) {
              $('#loadingProgressG').hide();
          },
          error: function() {
              $('#loadingProgressG').hide();
          }
      });
  });
  </code></pre>
  
  <p>Looking at other threads at StackOverflow, I already tried <a href="https://stackoverflow.com/questions/7189751/jquery-show-div-for-10-seconds">this</a> possible solution, changing:</p>
  
  <pre><code>$('#loadingProgressG').hide();
  </code></pre>
  
  <p>By</p>
  
  <pre><code>$('#loadingProgressG').delay(3000).hide(400);
  </code></pre>
  
  <p>But it didn't work. <a href="https://stackoverflow.com/questions/8307924/jquery-ajax-loading-display-the-loading-image-for-a-min-of-1-second">Also tried</a> changing the same line by:</p>
  
  <pre><code>setTimeout(function() {
      $('#loadingProgressG').hide();
  }, 3000);
  </code></pre>
  
  <p>And nothing. The most probably is that I'm doing something wrong, I'm not a jQuery guru. Any help or advice is appreciated.</p>
  
  <p>** I just noticed that using <em>setTimeout</em> works for the time set, only if some form validation stop the process.</p>