jQuery mouseout 和 setTimeout答案

【问题标题】：jQuery mouseout and setTimeoutjQuery mouseout 和 setTimeout
【发布时间】：2012-06-08 00:44:50
【问题描述】：

我有以下代码。

$("#login").mouseout(function() {
    setTimeout(function() {
        $("#login").animate({
            height: "toggle"
        })
    }, 500);
});

当鼠标离开 #login 时，它会等待 500 毫秒，然后它会隐藏元素。我想要的是，如果鼠标离开元素并在 500 毫秒内回到那里，它不会隐藏元素。否则，如果鼠标离开元素的“范围”超过 500 毫秒，它会调用 animate 函数并隐藏元素。

如果我把这段代码放在那里

$("#login").mouseover(function() {
    clearTimeout(t);
});

当它关闭时我将鼠标放在元素上，动画完成后它会再次弹出。

【问题讨论】：

标签： javascript delay mouseout

【解决方案1】：

为setTimeout声明一个变量，这样就可以使用clearTimeout：
（加上解决了你的“它会再次弹出”的问题）

$("#login")
    .mouseout(function() {
        window.t = setTimeout(function() {
            $("#login").animate({
                height: "toggle"
            })
        }, 500);
    })
    .mouseover(function(){
        if(window.t){
            clearTimeout(window.t);
            window.t = undefined;
        }else{
            //Do your menu popup thing here
        }
    });

【讨论】：

【解决方案2】：

您可以在mouseenter 或mouseover 事件中清除超时。

var t;
$("#login").mouseenter(function() {
    clearTimeout(t);
});
$("#login").mouseout(function() {
    t = setTimeout(function() {
        $("#login").animate({
            height: "toggle"
        })
    }, 500);
});

【讨论】：

嗯，不知道是怎么做到的。我已编辑帖子以将其删除。