CODEWITHSUNDEEP
javascriptjquery
ProfK
ProfK

Reputation: 51064

Automatically hide a div using jQuery if it gets no MouseOver in a time interval

I have a workaround that shows a div when a menu item gets MouseOver, but hides both only when the div gets MouseOut. This is required for now.

However, if the div never gets MouseOver, it never hides. What I would like to do is automatically hide the div if it doesn't get MouseOver within a few milliseconds of showing.

The hiding after a time shouldn't be hard, but reseting this on a MouseOver challenges me. Any ideas?

Upvotes: 0

Views: 1883

Answers (2)

cambraca
cambraca

Reputation: 27837

Do something like:

function hideYourDiv() {
  $("div#yourdiv").hide();
}
var theTimeout = setTimeout(hideYourDiv, 1000);
$("div#yourdiv").mouseover(function() {
  clearTimeout(theTimeout);
});

edited to conform to "proper" use of setTimeout :P (though for simple stuff like this I sometimes prefer to pass it a string.. both work anyway)

Upvotes: 2

GolezTrol
GolezTrol

Reputation: 116110

You can use setTimeout() to set a timeout, but you can also use clearTimeout. Each time you get a mouseOver, you can clear the previous timeOut and set a new one.

Upvotes: 1

Related Questions