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

Answer 2

您可能想要查看hoverIntent插件。 这是简短的描述：

而不是立即调用onMouseOver函数，它等待用户的鼠标在进行调用之前放慢速度

您可以在显示工具提示之前添加500毫秒的延迟，但如果您只是想防止意外鼠标悬停，则没有必要。 这是你如何实现它。

$(".item-wrapper").hoverIntent({
 over: function() { $('#' + $(this).attr("rel") + '-tip').delay(500).fadeIn("fast").show(); },
 timeout: 1000, // number = milliseconds delay before onMouseOut
 out: function() { $('#' + $(this).attr("rel") + '-tip').hide(); }
});

Answer 3

在.fadiIn之前添加.delay（500）延迟

在mouseleave函数开始时添加另一个延迟。

Answer 4

如何为mouseleave使用jquery延迟，所以将其更改为：

function() {//hide tooltip when the mouse moves off of the element
$('#' + $(this).attr("rel") + '-tip').delay(500).hide();
});

延迟悬停事件有点复杂，你需要保留一个计时器。 像这样的东西：

$(function() {
var timer;
$(".item-wrapper").hover(function() {
    if (timer)
    {
       clearTimeout(timer);
       timer=null;
    }
    timer = setTimeout(function() {
       $('#' + $(this).attr("rel") + '-tip').fadeIn("fast").show()
    },500);
});