Tumblr style UserHoverCard

Question

Hi everyone i have one problem with ajax hover. I am trying to make a userHoverCard like tumblr. But the hover animation not working when i use it with ajax.

This is

Answer 1

Essentially, I've created a pretty clever workaround. It is a mask that covers the image (invisible) until the html is loaded, then the hover css takes place after the z-index is lowered. The hover javascript is on the container.

FIDDLE

.summary {
    margin: -50px auto 0;
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 0;
}
.summary-mask {
    margin: 50px auto 0;
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 1;
}
.loaded .summary-mask {
    z-index: -1;
}

HTML

JS

var response = '
 
 
 Follow 
 Page Name 
 
 
 
 
Username
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy ..
 
 
 
 
 
 
 
';

$(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',
            success: function (returnHtml) {
                e.find('.user-container').html(returnHtml).promise().done(function () {
                    $('.the-container').addClass('loaded');
                });
            }
        });

    }

    function hideProfileTooltip() {
        $('.the-container').removeClass('loaded');
    }
    $('.the-container').hover(function (e) {

        var id = $(this).find('.summary').attr('data-id');
        showProfileTooltip($(this), id);

    }, function () {
        hideProfileTooltip();
    });
});