jQuery-如果悬停超过5秒，则显示div

Question

如果我将鼠标悬停在一个元素上超过5秒，我想显示一个div，我已经尝试了stackoverflow中发布的一些解决方案，但都不起作用。

这是我的悬停功能，不会超时

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

更新

没有一个答案有效，但如果我更改

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

至

alert('shown');

然后它就工作了（不明白为什么，试着把fadeIn改成show（），但仍然没有成功）。但我上面的悬停功能工作没有超时。

Answer 1

试试这个

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 2

使用hoverIntent，语法基本上与hover相同。它超级简单，而且它可以做你想要的事情，并增加一些奖金。悬停内容比计划悬停做得更好，它可以弄清楚你什么时候真正在悬停，以及为什么你的鼠标刚刚通过。

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 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 Timeout函数？

将显示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

我是Stack overflow论坛的新用户。我希望能帮助你！我喜欢用像flow这样的小代码来解决问题：

$(".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

Answer 7

此代码还将避免多次反弹

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