Question

I have a setup as described in this question which works perfectly. Essentially a drop down menu grows when you move your mouse over it to expose more options.

There is, however, a small issue. If you move the mouse outside of the #dropdown div and then back in again quickly it constantly fires the mouseenter and mouseleave events causing a never ending cycle of flickering. How can I get around it?

Here is my current jQuery code

$("#dropdown").hover(function() { 
        $(this).stop(true,true).fadeTo('fast',1);
        $("#options").stop(true,true).slideDown();
    }, function() { 
        $(this).stop(true,true).fadeTo('fast',0.1);
        $("#options").stop(true,true).slideUp();
    }
);

And current HTML code

<div id="dropdown">
    <div id="optionsPeek">Options</div>
    <div id="options">
        <!-- Links here -->
    </div>
</div>

dropdown is visible by default (10% opacity), optionspeek is always visible and once you hover over it, the options div slides down and the links inside it become visible.

Answer 1

What if you add a delay() to the fadeout? For example 1-2 seconds. That way you can move your mouse away and back onto the dropdown without causing any animations.

http://api.jquery.com/delay/