javascript - jQuery mouseout 和 setTimeout

Question

我有以下代码。

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

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

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

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

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

Answer 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
        }
    });