title: jQuery fadeIn() not working with AJAX call
body: <p>Here's my HTML code:</p>
  
  <pre><code>&lt;div id="loading"&gt;&lt;img src="blah blah" alt="Loading..." /&gt;&lt;/div&gt;   
  </code></pre>
  
  <p>Here's my JS code:</p>
  
  <pre><code>  $(document).ready(function () {       
              $('#loading').hide();
  
              $("#submitSessionBtn").click(function () {
                  $('#loading').fadeIn();                         
                  d3.select("svg").remove();
  
                  $.ajax({
                      type: "GET",
                      url: "Home/GetStuff/",
                      dataType: "json",
                      async: false,
                      success: function (result) {
                          console.log("Success!");
                          $('#loading').fadeOut();})
  </code></pre>
  
  <p>The image is basically a spinner image indicating loading. I want the image to be displayed as soon as I click the submit button and disappear when the AJAX call is done. But, currently it shows up a few seconds before the AJAX call completes and not as soon as the submit button is pressed.</p>
  
  <p>What am I doing wrong?</p>