相关疑难解决方法(0)

大家好,我有一个问题与ajax悬停.我正在尝试像tumblr一样创建userHoverCard.但是当我使用ajax时,悬停动画无效.

这是工作DEMO没有ajax只有CSS.在此演示中,您可以看到当您悬停图像时,.p-tooltip将打开动画效果.

但是,如果您从我的测试页面单击此DEMO,那么您可以看到当您悬停图像时,.p-tooltip将无法打开动画效果.

HTML

    <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>

这是我的ajax代码:

$(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(){ …