title: Jquery Ajax beforeSend loading animation
body: <p>Hi everyone i have one problem with my ajax loading animation. The problem is when i hover any image the loading animation active under all images.</p>
  
  <p>Like this <strong><a href="http://jsfiddle.net/sw4ev8b4/10/" rel="nofollow">FIDDLE</a></strong></p>
  
  <p>I want to make when i hover first image then <code>.ajax-loading</code> activated for only that image. and if i hover second image then <code>.ajax-loading</code> active for only second image ext..</p>
  
  <p>Anyone can help me here ?
  CSS</p>
  
  <pre><code>.ajax-loading {
      transition: all 0.3s;
      opacity: 0;
      z-index: -1;    
  }
  
  .ajax-loading.active {
      opacity: 1;
      z-index: 100;
  }
  </code></pre>
  
  <p>and AJAX</p>
  
  <pre><code>$(document).ready(function () {
  
      function showProfileTooltip(e, id) {
          //send id &amp; get info from get_profile.php 
          $.ajax({
              url: '/echo/html/',
              data: {
                  html: response,
                  delay: 0
              },
              method: 'post',
              beforeSend: function() {
                  $('.ajax-loading').addClass('active');    
              },
              success: function (returnHtml) {
                  e.find('.user-container').empty().html(returnHtml).promise().done(function () {
                      $('.the-container').addClass('loaded');
                  });
              }
          }).complete(function() {
              $('.ajax-loading').removeClass('active');    
          });
  
      }
  
      function hideProfileTooltip() {
          $('.the-container').removeClass('loaded');
      }
      $('.the-container').hover(function (e) {
  
          var id = $(this).find('.summary').attr('data-id');
          showProfileTooltip($(this), id);
  
      }, function () {
          hideProfileTooltip();
      });
  });
  </code></pre>