如何告诉 .hover() 等待？

Question

我有一个下拉菜单。 现在，当它向下滑动到多个级别时，我希望它在消失之前添加大约 2 秒的等待时间，以便用户在中断 .hover() 时可以重新进入。因为失误。

是否可以？

我的幻灯片代码：

$('.icon').hover(function() {
        $('li.icon > ul').slideDown('fast');
    }, function() { 
        $('li.icon > ul').slideUp('fast');
    });

Answer 1

这将使第二个函数在执行前等待 2 秒（2000 毫秒）：

$('.icon').hover(function() {
    clearTimeout($(this).data('timeout'));
    $('li.icon > ul').slideDown('fast');
}, function() {
    var t = setTimeout(function() {
        $('li.icon > ul').slideUp('fast');
    }, 2000);
    $(this).data('timeout', t);
});

当用户将鼠标悬停回来时，它还会清除超时以避免疯狂的行为。

然而，这并不是一个非常优雅的方法。 您可能应该查看 hoverIntent 插件，该插件旨在解决这个特定问题。

Answer 2

我个人喜欢“hoverIntent”插件：

http://cherne.net/brian/resources/ jquery.hoverIntent.html

来自页面：hoverIntent 是一个尝试确定用户意图的插件...就像水晶球一样，只需移动鼠标即可！ 它的工作原理类似于（并且源自）jQuery 的内置悬停。 但是，它不会立即调用 onMouseOver 函数，而是等到用户的鼠标速度足够慢后再进行调用。

为什么？ 延迟或防止意外触发动画或 ajax 调用。 简单的超时适用于小区域，但如果您的目标区域很大，则无论意图如何，它都可能会执行。

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config ) 

配置选项

灵敏度：
如果鼠标在轮询间隔之间移动的像素数少于此数量，则将调用“over”函数。 当最小灵敏度阈值为 1 时，鼠标不得在轮询间隔之间移动。 灵敏度阈值越高，您就越有可能收到误报。 默认灵敏度：7

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

超过：
必需的。 您想要调用 onMouseOver 的函数。 您的函数接收与 jQuery 的悬停方法相同的“this”和“event”对象。

超时：
在调用“out”函数之前的简单延迟（以毫秒为单位）。 如果用户在超时到期之前将鼠标移回到元素上，则不会调用“out”函数（也不会调用“over”函数）。 这主要是为了防止草率/人为的鼠标轨迹暂时（无意地）使用户离开目标元素......给他们时间返回。 默认超时：0

超时：
必需的。 您想要调用 onMouseOut 的函数。 您的函数接收与 jQuery 的悬停方法相同的“this”和“event”对象。 请注意，如果在同一运行中调用了“over”函数，hoverIntent 只会调用“out”函数。

Answer 3

一般的想法是使用 setTimeout，如下所示：

$('.icon').hover(function() {
           $('li.icon > ul').slideDown('fast');
    }, function() { 
           setTimeout(function() {
                $('li.icon > ul').slideUp('fast');
           }, 2000);
    });

但是，如果用户将鼠标移出然后快速再次移入，这可能会造成违反直觉的事情 - 这并不能说明当用户将鼠标悬停在上方时清除超时再来一次。 这将需要额外的状态。

Answer 4

以下命令将停止滑动 2 秒：

$('.icon').hover(function() {
  $('li.icon > ul').delay(2000).slideDown('fast');
}, function() { 
  $('li.icon > ul').slideUp('fast');
});

Answer 5

$('.icon').on("mouseenter mouseleave","li.icon > ul",function(e){
   var $this = $(this);
   if (e.type === 'mouseenter') {
       clearTimeout( $this.data('timeout') );
       $this.slideDown('fast');
   }else{ // is mouseleave:
       $this.data( 'timeout', setTimeout(function(){
           $this.slideUp('fast');
       },2000) );  
   }
 });

Answer 6

或者你可以简单地使用
过渡：所有 2 秒缓入缓出。
确保为不同的浏览器添加 -webkit、-moz 和 -o。

Answer 7

我认为这是您需要的代码：

    jQuery( document ).ready( function($) {  
    var navTimers = [];  
    $('.icon').hover(function() { 
            var id = jQuery.data( this );  
            var $this = $( this );  
            navTimers[id] = setTimeout( function() {  
                $this.children( 'ul' ).slideDown('fast');  
                navTimers[id] = "";  
            }, 300 );  
        },  
        function () {  
            var id = jQuery.data( this );  
            if ( navTimers[id] != "" ) {  
                clearTimeout( navTimers[id] );  
            } else {  
                $( this ).children( "ul" ).slideUp('fast'); 
            }  
        }  
    );  
}); 

Answer 8

var timer;

var delay = 200;

$('#hoverelement').hover(function() {

    on mouse hover, start a timeout

    timer = setTimeout(function() {

       Do your stuff here 

    }, delay);

}, function() {

   Do mouse leaving function stuff here    

    clearTimeout(timer);
});

//编辑：插入代码

Answer 9

我想向 Paolo Bergantino 补充一点，您可以在没有数据属性的情况下执行此操作：

var timer;
$('.icon').hover(function() {
    clearTimeout(timer);
    $('li.icon > ul').slideDown('fast');
}, function() {
    timer = setTimeout(function() {
        $('li.icon > ul').slideUp('fast');
    }, 2000);
});