jquery hover and setTimeout / clearTimeOut

hover, jquery, settimeout

Solution

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

Problem

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 it. On mouse leave this link a want to execute a function after 5 second. In this interval of 5 seconds, if i hover my div (#submenu) i want to clearTimeout. So this div won't desapear after 5 seconds. Here is my code : ``` $(document).ready(function() { $("#mylink").hover( function () { $('#submenu').show(); }, function() { var timer = setTimeout(function(){$('#submenu').hide();}, 5000); } ); $("#submenu").hover( function () { clearTimeout(timer); }, function() { $('#submenu').show(); } ); } ```

Original source