jQuery - 如果悬停超过 5 秒然后显示 div答案

【问题标题】：jQuery - if hover more then 5 seconds then show divjQuery - 如果悬停超过 5 秒然后显示 div
【发布时间】：2013-01-27 20:19:46
【问题描述】：

如果我将鼠标悬停在一个元素上超过 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() 但仍然没有运气）。但是我上面的悬停功能可以在没有超时的情况下工作。

【问题讨论】：

他们为什么不工作？使用超时有什么问题？
悬停意图插件：cherne.net/brian/resources/jquery.hoverIntent.html
这正是 hoverIntent 所做的，幸运的是 hoverIntent 语法基本上类似于 hover

标签： jquery function timeout

【解决方案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');
});

【讨论】：

【解决方案2】：

使用hoverIntent，语法与hover基本相同。它超级简单，并且通过一些额外的奖励完全符合您的要求。 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”函数是在单个轮询间隔之后。将轮询间隔设置得更高会增加第一次可能的“过度”调用之前的延迟，但也会增加到下一个比较点的时间。默认间隔：100

【讨论】：

在致电over 之前请告诉我如何延迟？？

【解决方案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');
});

【讨论】：

【解决方案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');
});

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案6】：

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

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

希望对你有帮助！朱利亚诺

【讨论】：

感谢您的建议。

【解决方案7】：

此代码还将避免多次弹跳

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

【讨论】：