Javascript 有没有更好的方法来制作悬停牌？

在我的网站上，我在用户的个人资料图片上有悬停卡。我有两个问题

我遇到的第一个问题是，当你在个人资料图片上移动鼠标或将鼠标移出个人资料图片时，它在显示和隐藏方面并不能很好地工作。当你在一张图片上快速移动鼠标（就像你只是在页面上移动鼠标）大约一秒钟后，它仍然会弹出。我不明白为什么它会这样做只有在悬停1000毫秒后，卡才会弹出。

我遇到的第二个问题是，如果你在一张图片上悬停，然后在另一张图片关闭之前移动到另一张图片上（就像它正上方的图片），那么在你将鼠标从图片上移开，然后再将其移回图片上之前，它将无法工作

我想知道是否有比我现在做的更好的方式来做mouseenter和mouseleave活动

下面是我的悬停卡JavaScript：

var timeout, timeout2, hovercard_request;
$('.profile-hovercard').live('mouseenter',function() {
if(!$('#hovercard').hasClass('open')) {
    var id = $(this).attr('data-id'),
        pos = $(this).offset(),
        width = $(this).outerWidth(),
        miniprofile_url = $(this).parent().attr('href') + '/mini_profile';
    timeout = setTimeout(function() {
        //$('#hovercard').remove();
        if ($('#hovercard').length <= 0) {
            var hc = '<div id="hovercard" class="open"> \
              <div class="hovercard-loading"><img src="/assets/img/ProgressIndicator.gif" /></div> \
              </div>';
            $('body').append(hc);
            $('#hovercard').css({
                'position': 'absolute',
                'top': pos.top + "px",
                'left': (pos.left + width + 11) + "px"
            });
        }
        else {
            $('#hovercard').css({
                'position': 'absolute',
                'top': pos.top + "px",
                'left': (pos.left + width + 11) + "px"
            }).html('<div class="hovercard-loading"><img src="/assets/img/ProgressIndicator.gif" /></div>').show().addClass('open');
        }
        $.get(miniprofile_url, {}, function(data) {
            $('#hovercard').html('<div class="hovercard-inner"> \
                                  <div class="hovercard-pic"> \
                                     <a href="'+data.url+'"><img src="' + data.img_path + '" alt="' + data.name + '" /></a> \
                                  </div> \
                                 <div class="hovercard-details"> \
                                 <h3><a href="'+data.url+'">' + data.name + ( data.you == 1 ? ' <span style="font-weight:normal">(you)</span>' : '' ) + '</a> ' + ( data.is_online ? '<span class="online-user-icon m" title="'+data.name+' is online."></span>' : '') + '</h3> \
                                 <div class="hovercard-stats"> \
                                     <strong class="points">' + data.points + ' point' + (data.points == 1 ? '' : 's') + '</strong><br /> \
                                     <strong>' + data.questions + '</strong> question' + (data.questions == 1 ? '' : 's') + ' / <strong>' + data.answers + '</strong> answer' + (data.answers == 1 ? '' : 's') + '<!-- / <strong>' + data.comments + '</strong> comment' + (data.comments == 1 ? '' : 's') + '--><br /> \
                                     <span class="location">' + data.location + '</span> \
                                 </div> \
                                 </div> \
                                 <div class="clear"></div> \
                                 </div>');
            if(data.bio !== '') {
                $('#hovercard').append('<div class="hovercard-bio">' + data.bio + '</div>');
            }
            else {
                $('#hovercard').append('<div class="hovercard-bio"><em>This user does not have a bio.</em></div>');
            }
        },'json').fail(function() {
            $('#hovercard').html('<div class="hovercard-loading">The request has failed. Please try again later.</div>');
        }).error(function() {
            $('#hovercard').html('<div class="hovercard-loading">An error has occurred. Please try again later.</div>');
        });
    }, 1000);
} // end if
});
$('.profile-hovercard').live('mouseleave',function() {
    clearTimeout(timeout);
    //hovercard_request.abort();
    timeout2 = setTimeout(function() {
       $('#hovercard').hide().removeClass('open');
    }, 400);
    $('#hovercard').hover(function() {
        clearTimeout(timeout2);
    },function() {
        timeout2 = setTimeout(function() {
            $('#hovercard').hide().removeClass('open');
        }, 300);
    });
});

var超时、超时2、hovercard\u请求；
$（'.profile hovercard'）.live（'mouseenter'，function（）{
if（！$（'#hovercard'）.hasClass（'open'））{
var id=$（this.attr（'data-id'），
pos=$（this）.offset（），
宽度=$（this）.outerWidth（），
miniprofile_url=$（this.parent（）.attr（'href'）+'/mini_profile'；
timeout=setTimeout（函数（）{
//$（'#hovercard'）。删除（）；
如果（$（'#hovercard'）.length您可以尝试在
setTimeout
之前添加
clearTimeout（x）
。这应该确保计时器不会启动两次

尽管如此，这段代码还是需要一些重构；mouseenter处理程序太长了，因此很难理解它的功能和调试

var timeout, timeout2, hovercard_request;
$('.profile-hovercard').live('mouseenter', function() {
    if (!$('#hovercard').hasClass('open')) {
        var id = $(this).attr('data-id'),
            pos = $(this).offset(),
            width = $(this).outerWidth(),
            miniprofile_url = $(this).parent().attr('href') + '/mini_profile';

        clearTimeout(timeout);
        timeout = setTimeout(function() {
            //$('#hovercard').remove();
            if ($('#hovercard').length <= 0) {
                var hc = '<div id="hovercard" class="open"> \
              <div class="hovercard-loading"><img src="/assets/img/ProgressIndicator.gif" /></div> \
              </div>';
                $('body').append(hc);
                $('#hovercard').css({
                    'position': 'absolute',
                    'top': pos.top + "px",
                    'left': (pos.left + width + 11) + "px"
                });
            }
            else {
                $('#hovercard').css({
                    'position': 'absolute',
                    'top': pos.top + "px",
                    'left': (pos.left + width + 11) + "px"
                }).html('<div class="hovercard-loading"><img src="/assets/img/ProgressIndicator.gif" /></div>').show().addClass('open');
            }
            $.get(miniprofile_url, {}, function(data) {
                $('#hovercard').html('<div class="hovercard-inner"> \
                                  <div class="hovercard-pic"> \
                                     <a href="' + data.url + '"><img src="' + data.img_path + '" alt="' + data.name + '" /></a> \
                                  </div> \
                                 <div class="hovercard-details"> \
                                 <h3><a href="' + data.url + '">' + data.name + (data.you == 1 ? ' <span style="font-weight:normal">(you)</span>' : '') + '</a> ' + (data.is_online ? '<span class="online-user-icon m" title="' + data.name + ' is online."></span>' : '') + '</h3> \
                                 <div class="hovercard-stats"> \
                                     <strong class="points">' + data.points + ' point' + (data.points == 1 ? '' : 's') + '</strong><br /> \
                                     <strong>' + data.questions + '</strong> question' + (data.questions == 1 ? '' : 's') + ' / <strong>' + data.answers + '</strong> answer' + (data.answers == 1 ? '' : 's') + '<!-- / <strong>' + data.comments + '</strong> comment' + (data.comments == 1 ? '' : 's') + '--><br /> \
                                     <span class="location">' + data.location + '</span> \
                                 </div> \
                                 </div> \
                                 <div class="clear"></div> \
                                 </div>');
                if (data.bio !== '') {
                    $('#hovercard').append('<div class="hovercard-bio">' + data.bio + '</div>');
                }
                else {
                    $('#hovercard').append('<div class="hovercard-bio"><em>This user does not have a bio.</em></div>');
                }
            }, 'json').fail(function() {
                $('#hovercard').html('<div class="hovercard-loading">The request has failed. Please try again later.</div>');
            }).error(function() {
                $('#hovercard').html('<div class="hovercard-loading">An error has occurred. Please try again later.</div>');
            });
        }, 1000);
    } // end if
});
$('.profile-hovercard').live('mouseleave', function() {
    clearTimeout(timeout2);
    //hovercard_request.abort();
    timeout2 = setTimeout(function() {
        $('#hovercard').hide().removeClass('open');
    }, 400);
    $('#hovercard').hover(function() {
        clearTimeout(timeout2);
    }, function() {
        clearTimeout(timeout2);
        timeout2 = setTimeout(function() {
            $('#hovercard').hide().removeClass('open');
        }, 300);
    });
});

var超时、超时2、hovercard\u请求；
$（'.profile hovercard'）.live（'mouseenter'，function（）{
if（！$（'#hovercard'）.hasClass（'open'））{
var id=$（this.attr（'data-id'），
pos=$（this）.offset（），
宽度=$（this）.outerWidth（），
miniprofile_url=$（this.parent（）.attr（'href'）+'/mini_profile'；
clearTimeout（超时）；
timeout=setTimeout（函数（）{
//$（'#hovercard'）。删除（）；
如果（$（'#hovercard'）.length您可以尝试在
setTimeout
之前添加
clearTimeout（x）
。这应该确保计时器不会启动两次

尽管如此，这段代码还是需要一些重构；mouseenter处理程序太长了，因此很难理解它的功能和调试

var timeout, timeout2, hovercard_request;
$('.profile-hovercard').live('mouseenter', function() {
    if (!$('#hovercard').hasClass('open')) {
        var id = $(this).attr('data-id'),
            pos = $(this).offset(),
            width = $(this).outerWidth(),
            miniprofile_url = $(this).parent().attr('href') + '/mini_profile';

        clearTimeout(timeout);
        timeout = setTimeout(function() {
            //$('#hovercard').remove();
            if ($('#hovercard').length <= 0) {
                var hc = '<div id="hovercard" class="open"> \
              <div class="hovercard-loading"><img src="/assets/img/ProgressIndicator.gif" /></div> \
              </div>';
                $('body').append(hc);
                $('#hovercard').css({
                    'position': 'absolute',
                    'top': pos.top + "px",
                    'left': (pos.left + width + 11) + "px"
                });
            }
            else {
                $('#hovercard').css({
                    'position': 'absolute',
                    'top': pos.top + "px",
                    'left': (pos.left + width + 11) + "px"
                }).html('<div class="hovercard-loading"><img src="/assets/img/ProgressIndicator.gif" /></div>').show().addClass('open');
            }
            $.get(miniprofile_url, {}, function(data) {
                $('#hovercard').html('<div class="hovercard-inner"> \
                                  <div class="hovercard-pic"> \
                                     <a href="' + data.url + '"><img src="' + data.img_path + '" alt="' + data.name + '" /></a> \
                                  </div> \
                                 <div class="hovercard-details"> \
                                 <h3><a href="' + data.url + '">' + data.name + (data.you == 1 ? ' <span style="font-weight:normal">(you)</span>' : '') + '</a> ' + (data.is_online ? '<span class="online-user-icon m" title="' + data.name + ' is online."></span>' : '') + '</h3> \
                                 <div class="hovercard-stats"> \
                                     <strong class="points">' + data.points + ' point' + (data.points == 1 ? '' : 's') + '</strong><br /> \
                                     <strong>' + data.questions + '</strong> question' + (data.questions == 1 ? '' : 's') + ' / <strong>' + data.answers + '</strong> answer' + (data.answers == 1 ? '' : 's') + '<!-- / <strong>' + data.comments + '</strong> comment' + (data.comments == 1 ? '' : 's') + '--><br /> \
                                     <span class="location">' + data.location + '</span> \
                                 </div> \
                                 </div> \
                                 <div class="clear"></div> \
                                 </div>');
                if (data.bio !== '') {
                    $('#hovercard').append('<div class="hovercard-bio">' + data.bio + '</div>');
                }
                else {
                    $('#hovercard').append('<div class="hovercard-bio"><em>This user does not have a bio.</em></div>');
                }
            }, 'json').fail(function() {
                $('#hovercard').html('<div class="hovercard-loading">The request has failed. Please try again later.</div>');
            }).error(function() {
                $('#hovercard').html('<div class="hovercard-loading">An error has occurred. Please try again later.</div>');
            });
        }, 1000);
    } // end if
});
$('.profile-hovercard').live('mouseleave', function() {
    clearTimeout(timeout2);
    //hovercard_request.abort();
    timeout2 = setTimeout(function() {
        $('#hovercard').hide().removeClass('open');
    }, 400);
    $('#hovercard').hover(function() {
        clearTimeout(timeout2);
    }, function() {
        clearTimeout(timeout2);
        timeout2 = setTimeout(function() {
            $('#hovercard').hide().removeClass('open');
        }, 300);
    });
});

var超时、超时2、hovercard\u请求；
$（'.profile hovercard'）.live（'mouseenter'，function（）{
if（！$（'#hovercard'）.hasClass（'open'））{
var id=$（this.attr（'data-id'），
pos=$（this）.offset（），
宽度=$（this）.outerWidth（），
miniprofile_url=$（this.parent（）.attr（'href'）+'/mini_profile'；
clearTimeout（超时）；
timeout=setTimeout（函数（）{
//$（'#hovercard'）。删除（）；
if（$（'#hovercard'）.length有一种方法可以做到：

var timeout;

$('.profile').hover(function() {
    pos = $(this).offset();

    timeout = setTimeout(function() {
        $('.hovercard').fadeIn().css({
            'top': pos.top - 20 + 'px',
            'left': pos.left - 20 + 'px'
        });
    }, 1000);

}, function() {
    clearTimeout(timeout);
});

$('.hovercard').mouseleave(function() {
    $('.hovercard').fadeOut();
});​

基本上，您可以为hovercard添加额外的填充，以便它也覆盖配置文件图片。这意味着您可以将配置文件图片用于
mouseenter
事件，将hovercard用于
mouseleave
事件

示例：
以下是一种方法：

var timeout;

$('.profile').hover(function() {
    pos = $(this).offset();

    timeout = setTimeout(function() {
        $('.hovercard').fadeIn().css({
            'top': pos.top - 20 + 'px',
            'left': pos.left - 20 + 'px'
        });
    }, 1000);

}, function() {
    clearTimeout(timeout);
});

$('.hovercard').mouseleave(function() {
    $('.hovercard').fadeOut();
});​

基本上，您可以为hovercard添加额外的填充，以便它也覆盖配置文件图片。这意味着您可以将配置文件图片用于
mouseenter
事件，将hovercard用于
mouseleave
事件

示例：
您为什么要自己实现这个功能？已经有了相关的插件，例如…@ŠimeVidas，实际上我不知道hoverIntent…但它看起来很有用。但是有了hoverIntent，当您将鼠标移动到卡上时，我能将它移动到哪里吗（从图片上看）它将保持打开状态？hoverIntent将负责显示卡。隐藏卡必须自己实现。@ŠimeVidas啊，我明白了。如果我可以在自己的代码中不使用插件实现同样的效果，我宁愿不包含另一个JS文件。不过，有一天我可能会使用hoverIntent来做其他事情，因为这看起来非常有用。W你为什么要自己实现这一点？已经有了相关的插件，例如…@ŠimeVidas，实际上我不知道hoverIntent…但它看起来很有用。但是有了hoverIntent，当你将鼠标移动到卡上时，我能将它移动到什么位置吗（从图片上看）它将保持打开状态？hoverIntent将负责显示该卡。隐藏该卡必须由您自己实现。@ŠimeVidas啊，我明白了。如果我可以在自己的代码中实现相同的效果，而无需插件，我宁愿不包含另一个JS文件。不过，我可能有一天会使用hoverIntent来做其他事情，因为这似乎非常有用。T这是一个好主意，但是用户将无法再单击个人资料图片转到此人的个人资料，除非他们先将鼠标移离悬停卡，然后再将其移回单击位置，以使悬停卡消失。这是一个好主意，但用户将无法再单击个人资料图片转到此人的个人资料除非他们先将鼠标从悬停卡上移开，然后再将其移回单击位置，从而使悬停卡消失。谢谢，这似乎很有效。它没有解决第二个问题，但解决了第一个问题。谢谢，这似乎很有效。它没有解决第二个问题，但解决了第一个问题。