Question:

<a href="http://jsfiddle.net/u7Qpj/" rel="nofollow">jsFiddle</a> <br /> I use a customized drop-down menu which runs on jquery events and animations. <br /> The problem occurs when I activate the drop-down via mouseenter several times, which results in the menu sliding down then sliding up several times. I tried to fix it by adding .stop(true), which was successful, but it resulted in other problems like <a href="https://stackoverflow.com/questions/12020534/drop-down-menu-cut-off-after-slideout/12020685#12020685" rel="nofollow">this.</a> I followed that advice(<a href="http://jsfiddle.net/fuABW/" rel="nofollow">jsFiddle Here</a>), but it causes more unattractive problems. I need is a way to stop a function from firing redundantly, but still be able to stop a "slide down" immediately and then "slide up" if the user triggers .mouseleave I tangled with custom queues for a good 5 hours, with no success :( <br />Any ideas, advice, and criticism is welcome.

Basically it boils down to delaying the execution of the event handler.

var mouseoverTimer = null; $('.elem').mouseover(function(){ clearTimeout(mouseoverTimer); //ignore previous trigger mouseoverTimer = setTimeout(function(){ //wait to execute handler again //execute actual handler here }, 10); });

If the same handler was called within the specified interval the pending execution is cancelled and queued again to execute 10ms later hoping that there's no subsequent trigger within that interval.