jquery - 延迟 jquery 悬停事件？

Question

我想延迟 jquery 中的悬停事件。当用户将鼠标悬停在链接或标签上时，我正在读取文件。我不希望此事件立即发生，以防用户只是在屏幕上移动鼠标。有没有办法延迟触发事件？

谢谢。

示例代码:

$(function() {
    $('#container a').hover(function() {
        $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
            {filename:'file.txt'},
            function() {
                $(this).appendTo('#info');
            }
         );
    },
        function() { $('#info').remove(); }
    });
});

更新: (1/14/09)添加 HoverIntent 插件后，将上面的代码更改为以下代码来实现它。实现起来非常简单。

$(function() {
    hiConfig = {
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
        interval: 200, // number = milliseconds for onMouseOver polling interval
        timeout: 200, // number = milliseconds delay before onMouseOut
        over: function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
                function() {
                   $(this).appendTo('#info');
                }
             );
        }, // function = onMouseOver callback (REQUIRED)
        out: function() { $('#info').remove();  } // function = onMouseOut callback (REQUIRED)
    }
    $('#container a').hoverIntent(hiConfig)
}

Answer 1

使用 jquery 的 hoverIntent 插件:http://cherne.net/brian/resources/jquery.hoverIntent.html

对于您所描述的内容，它绝对是完美的，我已经在几乎所有需要鼠标悬停激活菜单等的项目中使用它...

这种方法有一个陷阱，一些界面没有“悬停”状态，例如。移动浏览器，如 iphone 上的 safari。您可能隐藏了界面或导航的重要部分，而无法在此类设备上将其打开。您可以使用特定于设备的 CSS 来解决这个问题。