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

Declare a variable for setTimeout, so that you can use clearTimeout:
(Plus solved your "it'll pop up again" problem)

$("#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

You can clear the timeout in the mouseenter or mouseover events.

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