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 to 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，语法与悬停基本相同。它非常简单，它可以提供你想要的一些额外的奖金。 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

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

此代码还可以避免多次弹跳

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

Answer 7

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

我希望我能帮到你！朱

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

7 个答案: