javascript - jQuery 菜单悬停关闭延迟

Question

我正在使用下面的 jQuery/javascript 来控制菜单的悬停功能。当“item-wrapper”项目悬停时，它会显示一个工具提示子菜单。

我想在此代码中添加两个功能:

1) 工具提示仅在悬停在菜单项上 500 毫秒后出现

2) 让用户能够离开工具提示并让它保持可见约 1 秒(从而让他们可以选择在它消失之前移回它上面)

$(".item-wrapper").hover(function() {
    $('#' + $(this).attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() {//hide tooltip when the mouse moves off of the element
$('#' + $(this).attr("rel") + '-tip').hide();
});

非常感谢所有帮助

Answer 1

您可以使用setTimeout 来延迟调用。棘手的部分是确保在用户将鼠标重新悬停在元素上或悬停在其他元素上时正确清除超时。

var timeouts = {};
$(".item-wrapper").hover(function() {
    var rel = $(this).attr("rel");
    var el = $('#' + rel + '-tip');
    if (timeouts[rel]) clearTimeout(timeouts[rel]);
    timeouts[rel] = setTimeout(function () { el.fadeIn("fast").show(); }, 500);
},
function() {
    var rel = $(this).attr("rel");
    var el = $('#' + rel + '-tip');
    if (timeouts[rel]) clearTimeout(timeouts[rel]);
    timeouts[rel] = setTimeout(function () { el.hide() }, 1000);
});