CODEWITHSUNDEEP
javascriptjqueryhoverdelay
Tom
Tom

Reputation: 12998

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

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

Upvotes: 3

Views: 7064

Answers (2)

rorypicko
rorypicko

Reputation: 4234

you need jquery .stop(true, true) to stop all current timers / events on that element.

I forked your fiddle

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

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

Upvotes: 6

Adil Shaikh
Adil Shaikh

Reputation: 44740

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

Demo ---> http://jsfiddle.net/qSe6t/2/

Upvotes: 3

Related Questions