setTimeout Trigger and Clear

setTimeout Trigger and Clear

Hi all

I use HoverIntent to trigger a submenu appearing:

  1. $('[id^="showmenu_"]').hoverIntent({
        over: makeTall,
        out: function(){  },
        timeout: 100
    },function(){ });

        over: function(){  },
        out: makeShort,
        timeout: 100

Now the respective functions for the above are:

  1. function makeTall() {
        itemid   = $(this).attr('id').split("_")[1];
        $('[id^="models_"]:not('+itemid+')').hide(); // hide all other sub menu items
        $("#models_"+itemid).show(); // show the correct sub menu
        var run = setTimeout(function() { $("#models_"+itemid).hide(); }, 5000);   // start a NEW countdown 

    function makeShort() {
        $('[id^="models_"]').hide(); // hide all sub menus
        clearTimeout(run); // clear any existing countdowns in process

Now I have an issue where if the user does not mouse over the submenu and then mouse-out, the sub menu stays on screen for eternity.  I need to add a setTimeout function to it to hide the sub menu automatically if X number of seconds passes regardless where the mouse cursor is.

I have had a stab at it above but the timeout doesn't seem to clear if I mouse over a new menu item, it's like the 5 seconds just counts down regardless when I need it to reset.

Any thoughts?

Thank you for reading.