怎么告诉.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

interval: hoverIntent在读取/比较鼠标坐标之间等待的毫秒数.当用户的鼠标首次进入元素时,将记录其坐标.最快的"over"函数可以在单个轮询间隔之后调用.将轮询间隔设置得更高将增加第一次可能"超过"呼叫之前的延迟,但也会增加到下一个比较点的时间.默认间隔:100

结束: 必填.你想在onMouseOver上调用的函数.您的函数接收与jQuery的悬停方法相同的"this"和"event"对象.

timeout: 调用"out"函数之前的简单延迟(以毫秒为单位).如果用户在超时到期之前将鼠标移回元素,则不会调用"out"函数(也不会调用"over"函数).这主要是为了防止草率/人为的鼠标移动轨迹暂时(和无意地)将用户从目标元素中移除......给予他们返回的时间.默认超时:0

出: 需要.你想在onMouseOut上调用的函数.您的函数接收与jQuery的悬停方法相同的"this"和"event"对象.注意,如果在同一次运行中调用了"over"函数,hoverIntent将仅调用"out"函数.