title: Show/Hide Loading GIF Can't get it to work
body: <p>I'm trying to show a loading GIF file while an ajax request is submitted. Below is my code, can anyone point to what I'm doing wrong? I want that as soon as the button is pressed it shows the loading GIF until the data comes back from the server.</p>
  
  <p>Any help would be greatly appreciated. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="page-header"&gt;
  &lt;div class="loader" id="loader" style="display:none"&gt;&lt;/div&gt; 
  &lt;div class="blog"&gt;
  &lt;input type="submit" value="Creat Jobs" id="createJobsButton"/&gt;
  &lt;div id="resuls"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>   .loader{
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     background:rgba(255,255,255, .8)url('../img/ajax-loader.gif') no-repeat 50%
     } 
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>$(document).ready(function(){
  
              $('#createJobsButton' ).click( function() {
                  $('#loader').css('display', 'show');
  
                  $.post( "services.php", {},
                      function( data ) 
                      {
                      $('#resuls').append(data);
                      $('#loader').css('display', 'none');
                      }
                  );
              });
          }
          );
  </code></pre>