title: AJAX Adding effect before and after request
body: <p>I'm trying to achieve is when my user press a button, it request job based on city. I have successfully do that by copying some script.
  Now I'm trying to apply some effect.</p>
  
  <ol>
  <li>On button click show loading image gif</li>
  <li>If success it will show a list view</li>
  <li><p>If fail it will show No Job in your current city</p>
  
  <pre><code>&lt;script&gt;
          // Set City variable
          var city ="Amsterdam";
          //on document ready
          $(document).ready(function(){
         //On button with the id getjob clicked
              $("#getJob").click(function(){
                  //Ajax request and on success call listjob function
                  $.ajax({url:"http://domain.org/job.php?city="+city,
                          success:function(result){
                              var myArr = JSON.parse(result);
                              listJob(myArr);
                          }});    
              });
          });
   function listJob(arr) {
      var out = "";
      var i;
      for(i = 0; i &lt; arr.length; i++) {
          out += '&lt;li&gt;&lt;a href="#jobOne"&gt;&lt;i mg src="http://domain.org/img/' + arr[i].image +'"&gt;&lt;/a&gt;&lt;h2&gt;Employer:' +
          arr[i].employer + '&lt;/h2&gt;&lt;h3&gt;Position: '+  arr[i].jobtitle +'&lt;/h3&gt;&lt;p&gt;Job Description :' + arr[i].jobdescription + '&lt;/p&gt;&lt;p&gt;Salary: ' + arr[i].salary  +'&lt;/p&gt;&lt;/li&gt;';
      }
      $("#jobListing").html(out);
  }
  </code></pre>
  
  <p></p></li>
  </ol>
  
  <p>Please Help</p>