jQuery菜单徘徊延迟

Question

我正在使用下面的jQuery/javascript来控制菜单的悬停功能.当"项目包装"项目悬停时,它会显示工具提示子菜单.

我希望为此代码添加两项功能:

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);
});