jquery hover and setTimeout / clearTimeOut

Question

I\'m currently trying to do a menu with submenu. Here is what i want to do.

On hover a link (#mylink) i want to display a div (lets call it \"#submenu\") right under

Answer 1

SLaks has the right answer, but to elaborate on it, you would put var timer outside the function handler. Note that this example doesn't make timer a global variable - it just widens its scope so all handlers can use it.

$(document).ready(function(){
    var timer;
    $("#mylink").hover(
        function(){
            $('#submenu').show();
        }, function(){
            timer = setTimeout(function(){$('#submenu').hide();}, 5000);
        }
    );

    $("#submenu").hover(
        function(){
            clearTimeout(timer);
        }, function(){
            $('#submenu').show();
        }
    );
}