如何告诉 .hover() 等待? [英] How to tell .hover() to wait?

问题描述

我有一个下拉菜单.现在，当它滑到多个级别时，我希望它在它消失之前增加大约 2 秒的等待时间，这样用户就可以在他打破 .hover() 时重新进入错了.

I have a drop down menu. Now when it's slided down to multiple levels, I'd like it to add wait time for like 2 secs, before it disappears, so the user can get back in, when he breaks the .hover() by mistake.

有可能吗?

我的幻灯片代码:

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

推荐答案

这将使第二个函数在执行前等待 2 秒(2000 毫秒):

This will make the second function wait 2 seconds (2000 milliseconds) before executing:

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

当用户重新悬停时，它还清除超时以避免疯狂行为.

It also clears the timeout when the user hovers back in to avoid crazy behavior.

然而，这不是一种非常优雅的方式.您可能应该查看 hoverIntent 插件，该插件旨在解决此特定问题.

This is not a very elegant way of doing this, however. You should probably check out the hoverIntent plugin, which is designed to solve this particular problem.

这篇关于如何告诉 .hover() 等待?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！