Jquery Ajax beforeSend loading animation

Question

Hi everyone i have one problem with my ajax loading animation. The problem is when i hover any image the loading animation active under all images.

Like this FIDDLE

I want to make when i hover first image then .ajax-loading activated for only that image. and if i hover second image then .ajax-loading active for only second image ext..

Anyone can help me here ? CSS

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

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

and 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();
    });
});

Solution

The problem is that the beforeSend function activate the class active for all the elements with the class .ajax-loading.

Since you're passing the jQuery object that is receiving the hover to the function, you can take advantage of that and add the class active only to those elements with the class .ajax-loading under it.

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

Fiddle

Hope it helps.

Comments

[innovation]

I did not see it. Thank you.