1

我有以下代码。

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

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

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

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

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

4

2 回答 2

2

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
        }
    });
于 2012-06-03T18:48:48.190 回答
1

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);
});
于 2012-06-03T18:49:44.150 回答