Hey guys, I'm facing an issue with ajax hover effects. I'm attempting to create a userHoverCard similar to Tumblr's functionality. However, the hover animation isn't working properly when I integrate it with ajax.
The hover effect is functional in this DEMO which only uses CSS without ajax. If you check out the demo, you'll notice that hovering over images triggers the display of .p-tooltip with a smooth animation effect.
However, if you visit this DEMO on my test page, you'll see that hovering over an image doesn't trigger the animation effect for .p-tooltip.
Here's the HTML code snippet:
<div class="p-tooltip"></div>
<div class="summary" data-id="25">
<a href=#" class="profile-ava"></a>
</div>
<div class="summary" data-id="20">
<a href=#" class="profile-ava"></a>
</div>
<div class="summary" data-id="25">
<a href=#" class="profile-ava"></a>
</div>
This is the ajax code I'm using:
$(document).ready(function() {
function showProfileTooltip(e, id){
e.append($('.p-tooltip').css({
'top':'20',
'left':'80'
}).show());
//send id & get info from get_profile.php
$.ajax({
url: 'get_profile.php?uid='+id,
beforeSend: function(){
$('.p-tooltip').html('Loading..');
},
success: function(html){
$('.p-tooltip').html(html);
}
});
}
function hideProfileTooltip(){
$('.p-tooltip').hide().fadeIn('fast');
}
$('.summary a').hover(function(e){
var id = $(this).attr('data-id');
showProfileTooltip($(this), id);
}, function(){
setTimeout(function(){
hideProfileTooltip();
},2000);
});
});
And here's the corresponding CSS code:
[CSS CODE GOES HERE]If anyone can offer some assistance, that would be greatly appreciated!