title: jQuery ajax loading image not hiding
body: <p>I am using jquery ajax to load a separate page into a modal window when a link is clicked.  While the modal content is loading, I have a loading image that displays. The loading image is in a div on the page and is shown for any ajax loading on the page. This all works correctly, but I can't seem to get the image to hide after the ajax call is successful.</p>
  
  <p>Here is the jquery I am using:</p>
  
  <pre><code>$('#loadingImage').ajaxStart(function(){
      $(this).show();
  });
  $('#loadingImage').ajaxSuccess(function(){ //also tried ajaxStop
      $(this).hide();
  });
  
  function loadMap(){         
  $('#whereweare-map').click(function(){
      $('#lightBox').removeClass().addClass('reveal-modal expand');
      $.ajax({
          url: '/Map#mapLoad',
          success: function(data){
              $('#lightBox').reveal();
              $('#lightBoxContent').html(data);         
          }
      });
         return false;
          });
      }
  loadMap();
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="imageLoading"&gt;&lt;/div&gt;
  &lt;a href="#" id="whereweare-map"&gt;Where We Are&lt;/a&gt;
  &lt;div class="reveal-modal" id="lightBox"&gt;
      &lt;div id="lightBoxContent"&gt;&lt;!-- Load Content Here --&gt;&lt;/div&gt;
      &lt;a class="close-reveal-modal"&gt;&amp;#215;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>#loadingImage {
  display:none; 
  height:84px; 
  width:84px; 
  position:fixed; 
  top:50%; 
  left:50%; 
  z-index: 1;
  background: url('preloader.gif') no-repeat center center;
  background-color: #000; 
  background-color: rgba(0, 0, 0, 0.7);
  -moz-border-radius:45px;
  -webkit-border-radius:45px;
  border-radius:45px;
  }
  </code></pre>
  
  <p>Thanks for the help.</p>