Prevent an effect running twice in jQuery mouseenter/leave when used with .on()
<p>I have a dropdown box that operates with the following:</p>

<pre><code>$(document).on("mouseenter mouseleave", "#dropdown", function(event){

    if (event.type == 'mouseenter')
        $('#dropdown ul.children').slideDown(1000);
     else
        $('#dropdown ul.children').slideUp(1000);

    //stop();?
});
</code></pre>

<p>However if you move the mouse out and in fast then you can make another event run before the other has finished, how can I ensure the current on finishes before the next starts?</p>

<p>If I use <code>.stop()</code> then it's possible to mouseover and move the mouse back off and on and it will just restart the animation from the beginning making it look jerky?</p>
