在我的网站上,我在用户的个人资料图片上有悬停卡。我有两个问题。
我遇到的第一个问题是,当您将鼠标移入或移出个人资料图片时,它在显示和隐藏方面效果不佳。当您将鼠标快速移动到图片上时(就像您只是在页面上移动鼠标一样),大约一秒钟后它仍然会弹出。我不明白为什么它这样做。 只有在悬停 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);
});
});
当您将鼠标悬停在某人的照片上时,它旁边会弹出一个小框,显示他们的一些信息。在上面的代码中,我设置了所有超时,因为这是我可以让卡保持打开状态的唯一方法,以便有人可以将鼠标移动到卡上而无需关闭卡。
最佳答案
您可以尝试在 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);
});
});
关于javascript - 悬停卡有更好的方法吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14007949/