Delaying a jquery event

[chazzwick]

i have a div that is set to reveal when you click a button, and hide when you move the mouse away from the container div. i cant figure out how to set make it hide only after a delay of a second or two. anyone know how i would go about this?

http://charles-harvey.co.uk/examples/hover/

Code:

$(document).ready(function() {

$(“#push”).click(function(){
$(“#reveal”).slideToggle();
});

$(“#push”).hover(function(){
// do nothing
}, function(){
$(“#reveal”).slideUp();

});

});

[Rob MacKay]

If you add a .animate({opacity: 1.0}, 3000) as the first action after the hover out, then chain the rest of your stuff – it will stay visible for like 3 seconds then remove itself.

Ya?

[Chris Coyier]

Typically delays are handled with the setInterval function.

http://www.w3schools.com/HTMLDOM/met_wi … terval.asp

Code:

function doTheHide() {
$(“#reveal”).slideUp();
}

$(“#push”).hover(function(){
// do nothing
}, function(){
var int = setInterval(“doTheHide()”,2000);
});

[Chris Coyier]

Actually, setTimeout is even better here, sorry about that:

setTimeout("yourFunction()",2000);

[chazzwick]

Thanks for your replies. I tried both, Robski’s worked,but Chris’s didnt. Not sure if i got the code wrong. Heres what ive got:

Code:

$(document).ready(function() {

function doTheHide() {
$(“#reveal”).slideUp();
}

$(“#push”).click(function(){
$(“#reveal”).slideToggle();
});

$(“#container”).hover(function(){
// do nothing
}, function(){
setTimeout(“doTheHide()”,1000);
});
});

[davesgonebananas]

It’s because the function doTheHide is declared locally (i.e. inside another function). To call it you should specify it as a function pointer instead of a string.

setTimeout(doTheHide,1000);

[chazzwick]

thanks dave, that sorted it! :D

[davesgonebananas]

No problem!

[Author]

Posts