setTimeout Trigger and Clear
Hi all
I use HoverIntent to trigger a submenu appearing:
- $('[id^="showmenu_"]').hoverIntent({
over: makeTall,
out: function(){ },
timeout: 100
},function(){ });
$('[id^="models_"]').hoverIntent({
over: function(){ },
out: makeShort,
timeout: 100
},function(){});
Now the respective functions for the above are:
- 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.