Question

我有这个脚本：

$("#menu ul li").mouseover(
    function () {
        $(this).find(".submenu").fadeIn("slow");
    }
);

var timer = 0;
function animate_me() {
    $(this).find(".submenu").stop().fadeOut("slow");
}
$(function(){
    $("#menu ul li").mouseout(function(){
        timer = setTimeout("animate_me()", 300); // start timer when mouse is moved in
    }, function() {
        clearTimeout(timer); // stop it if mouse is moved out
    });
});

如何延迟淡出，直到菜单ul l已被关闭两秒钟？

Answer 1

使用 HoverIntent plugin for jQuery 。它完全符合您的需求和更多。

具体而言，超时功能提供此功能。用法示例：

function showIt() { $(this).find(".submenu").fadeIn("slow"); }
function hideIt() { $(this).find(".submenu").stop().fadeOut("slow"); }

$("#menu ul li").hoverIntent({
    over: showIt,
    out: hideIt,
    timeout: 300 /*ms*/
});

来自文档

<强>超时：

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

Answer 2

所有的拳头，mouseout，只需要一个参数。如果您想以这种方式使用它，则需要使用.hover()。然后，您可以使用.dealy()来实现目标，.stop(true,true)清除延迟

这是一个演示： http://jsfiddle.net/meo/zTTFJ/

Jquery延迟鼠标输出

2 个答案: