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

Answer 2

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

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