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