Jquery Ajax beforeSend 加载动画答案

【问题标题】：Jquery Ajax beforeSend loading animationJquery Ajax beforeSend 加载动画
【发布时间】：2015-02-08 20:00:49
【问题描述】：

大家好，我的 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();
    });
});

【问题讨论】：

标签： javascript jquery css ajax

【解决方案1】：

问题是beforeSend 函数为所有类.ajax-loading 的元素激活类active。

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

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

Fiddle

希望对你有帮助。

【讨论】：

我没看到。谢谢。