javascript - Jquery Ajax beforeSend 加载动画

Question

大家好，我的 ajax 加载动画有一个问题。问题是当我将任何图像悬停时，所有图像下的加载动画都处于事件状态。

喜欢这个 FIDDLE

我想当我悬停第一张图片然后 .ajax-loading 只为该图片激活时。如果我将鼠标悬停在第二张图片上，则 .ajax-loading 仅针对第二张图片 ext..

激活

有人可以帮我吗？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 函数为类 .ajax-loading 的所有元素激活类 active。

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

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

Fiddle

希望对您有所帮助。