jQuery的 - 如果悬停更多然后在5秒钟，然后显示DIV

Question

我要显示一个div，如果我一个元素的更多然后在5秒悬停，我已经试过张贴在计算器一些解决方案，但他们都不工作。

这是没有时间我的悬停功能进行

$('div.avatar-with-data, .q-item-avatar').hover(function(){ 
     $(this).find('div.user-data').fadeIn('fast'); 
    },function(){ 
     $(this).find('div.user-data').fadeOut('fast'); 
    }); 

UPDATE

没有答案的工作，但如果我改变

$(this).find('div.user-data').fadeIn('fast');

到

alert('shown');

然后它（不明白为什么，试图改变淡入显示（），但仍然没有运气）。 但我上面的悬停功能没有超时工作。

Answer 1

使用hoverIntent，语法基本相同悬停。它超级简单，它完全符合你想要的一些额外奖金。 HoverIntent做的比计划悬停时计算出来的要好得多，当你真的在盘旋时，以及为什么你的鼠标正在通过。

var config = {  
    over: makeTall, // function = onMouseOver callback (REQUIRED)  
    timeout: 500, // number = milliseconds delay before onMouseOut  
    interval: 5000, // number = milliseconds delay before trying to call over  
    out: makeShort // function = onMouseOut callback (REQUIRED)  
}; 

$("#demo3 li").hoverIntent(config) 

从上面提供的hoverIntent连杆的第一页

直接...

间隔： /读数之间hoverIntent等待比较鼠标坐标的毫秒数。当用户的鼠标首次进入元素时，其坐标被记录下来。 “over”功能最快可以在单个轮询间隔后调用。将轮询间隔设置得更高会增加第一次可能的“over”呼叫之前的延迟时间，但也会增加到下一个比较点的时间。默认的时间间隔：100

Answer 2

试试这个

var tOut; 
$('div.avatar-with-data, .q-item-avatar').hover(function(){ 
    tOut = setTimeout(function(){ 
     $(this).find('div.user-data').fadeIn('fast'); 
    },5000); 
},function(){ 
    clearTimeout(tOut); 
    $(this).find('div.user-data').fadeOut('fast'); 
}); 

Answer 3

应该是比较简单的。您需要在悬停时开始超时5秒，并在停止悬停时清除它。

var hoverTimeout; 

$('div.avatar-with-data, .q-item-avatar').hover(function() { 
    hoverTimeout = setTimeout(function() { 
     $(this).find('div.user-data').fadeIn('fast'); 
    }, 5000); 
}, function() { 
    clearTimeout(hoverTimeout); 
    $(this).find('div.user-data').fadeOut('fast'); 
}); 

Answer 4

您需要存储一个变量，并使用setTimeout()。像这样的东西应该工作：

var timer; 

$('div.avatar-with-data, .q-item-avatar').hover(function() { 
    hovered = true; 
    timer = window.setTimeout(function() { 
      $(this).find('div.user-data').fadeIn('fast'); 
    }, 5000); 
}, function() { 
    window.clearTimeout(timer); 
    $(this).find('div.user-data').fadeOut('fast'); 
}); 

Answer 5

也许使用JavaScript超时功能？

设置的超时，显示在div 5000（5秒）的函数。当你悬停时清除超时。没有测试过这一点，但希望它会帮助你进一步沿着...

var timeout; 

$('div.avatar-with-data, .q-item-avatar').hover(function(){ 
     timeout=setTimeout(showTooltip,5000);  
    },function(){  
     hideTooltip(); 
    }); 

function showTooltip() { 
    $(this).find('div.user-data').fadeIn('fast'); 
    clearTimeout(t); 
} 

function hideTooltip() { 
    $(this).find('div.user-data').fadeOut('fast'); 
    clearTimeout(timeout); 
} 

Answer 6

此代码也将避免多次弹跳

var myVar; 
$(".liveUser").on({ 
     mouseenter: function() { 
     myVar = setTimeout(function(){ 
      $(".userDetail").stop().hide().fadeIn(); 
       }, 400); 
     }, 
     mouseleave: function() { 
      clearTimeout(myVar); 
      $(".userDetail").stop().fadeOut(); 
     } 
    }); 

Answer 7

我在堆栈溢出论坛的新用户。我希望能帮助你！我喜欢用像流量这样的小码解决问题：

$(".liveUser").on("mouseover mouseout", function(event) { 
    if (event.type !== "mouseover") 
    clearTimeout(showID); 
    showID = setTimeout(function() {$(".userDetail")[(event.type === "mouseover"?"show":"hide")]()}, (event.type === "mouseover"?3000:0)); 
}); 

我希望我帮你！ Giuliano