Question

Im writing a simple jquery menu system that shows / hides a DIV on mouse over a text link.

I want to implement a short pause before the slide happens, so that the menue doesnt drop down if the mouse just flies over the menu link.

this is how i currently activate the menu:

<script type="text/javascript"><!--
$('#aboutLink').mouseover(function() {$('#aboutMenu1').slideDown('fast');
$('#aboutLink').css("color", "#ff297b");});
 --></script>

So in effect what i need to do is on mouseover, wait say 300ms, then, IF the mouse is STILL over the link, do the animation.

Answer 1

You probably want to do something like that:

var timeout;

$('#aboutLink').mouseover(function() {
    timeout = window.setTimeout(function() {
        $('#aboutMenu1').slideDown('fast');
        $('#aboutLink').css("color", "#ff297b");
    }, 300);
});

$('#aboutLink').mouseout(function() {
    if(timeout) {
        window.clearTimeout(timeout);
    }
});

First you set the timeout, that will execute the given function after 300ms, but if the user leaves the div the timeout is cleared and nothing will happen.