javascript - jquery hover - hide after delay if cursor has not re-hovered over element

Question

I have an icon on my page which after a 500ms delay pops up a connecting box with further details.

http://jsfiddle.net/qSe6t/1/f

Then when you mouseout from both the icon and the popup, after a 500ms delay the popup is hidden.

The trouble I am having is trying to prevent the hide from happening is the cursor re-enters the icon/popup during that 500ms delay.

Here's the code...

<div id="accountIcon">
    <div id="accountPopup"></div>
</div>

CSS:

#accountIcon {
    position:relative;
    height:58px;
    width:80px;
    cursor:pointer;
    background-color:#000;
}
#accountPopup {
    position:absolute;
    top:58px;
    width:400px;
    height:200px;
    background-color:#CCC;
    display:none;
}

jQuery:

$("#accountIcon").hover(function () {
    $("#accountPopup").delay(500).show(0);
}, function () {
    $("#accountPopup").delay(500).hide(0);
});

Answer 1

您需要 jquery .stop(true, true) 来停止该元素上的所有当前计时器/事件。

我叉了你的小提琴

http://jsfiddle.net/qSe6t/3/

$("#accountPopup").stop(true,true).delay(500).hide(0);

Answer 2

var timeout;
$("#accountIcon").hover(function () {
    clearTimeout(timeout);
    $("#accountPopup").delay(500).show(0);
}, function () {
    timeout = setTimeout(function(){
      $("#accountPopup").delay(500).hide(0);
    },500);
});

演示---> http://jsfiddle.net/qSe6t/2/