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

希望它有所帮助。

Jquery Ajax beforeSend加载动画

1 个答案: