jquery阿贾克斯beforeSend加载动画

Question

嗨，大家好，我有我的ajax加载动画的一个问题。问题是，当我将所有图像中的加载动画悬停在任何图像上时。

像这样FIDDLE

我要让我先悬停图像，然后.ajax-loading对于只有图像被激活。如果我徘徊第二个图像，然后.ajax-loading只有第二个图像分机有效。

任何人都可以帮助我吗？ CSS

.ajax-loading { 
    transition: all 0.3s; 
    opacity: 0; 
    z-index: -1;  
} 

.ajax-loading.active { 
    opacity: 1; 
    z-index: 100; 
} 

和AJAX

$(document).ready(function() { 

    function showProfileTooltip(e, id) { 
     //send id & 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(); 
    }); 
}); 

Answer 1

的问题是beforeSend功能激活类active所有与类.ajax-loading的元素。

由于您将正在接收悬停的jQuery对象传递给该函数，因此可以利用该对象并将类active仅添加到类.ajax-loading下的那些元素。

beforeSend: function() { 
    $('.ajax-loading',e).addClass('active');// Note the ,e that I added 
}, 

Fiddle

希望它能帮助。