3

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

4

7 回答 7

9

试试这个

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');
});
于 2013-02-12T13:48:58.503 回答
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');
});
于 2013-02-12T13:49:23.747 回答
3

使用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

于 2013-02-12T14:42:05.377 回答
1

您需要存储一个变量，然后使用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');
});
于 2013-02-12T13:49:33.757 回答
1

也许使用 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);
}
于 2013-02-12T13:53:42.973 回答
1

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

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

于 2016-04-27T15:33:26.860 回答
0

此代码还将避免多次弹跳

 var myVar;
 $(".liveUser").on({
        mouseenter: function () {
        myVar = setTimeout(function(){
             $(".userDetail").stop().hide().fadeIn();
                 }, 400);
        },
        mouseleave: function () {
            clearTimeout(myVar);
            $(".userDetail").stop().fadeOut();
       }
   });
于 2014-05-26T06:55:53.220 回答