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

希望它能幫助。