JQuery hide priority over show?
<p>I'm having an issue with JQuery show and hide.  When I hover over an element, I want to show another element pop out to the right.  I have managed that with the following code:</p>

<pre><code>var actionHoverInListener = function () {
    $(this).children('.pop-out').show("slide", { direction:"left" }, 100);
};
var actionHoverOutListener = function () {
    $(this).children('.pop-out').hide("slide", { direction:"left" }, 100);
};

// Add a hover listener for actions
$(".magic").hover(
    actionHoverInListener, actionHoverOutListener
);
</code></pre>

<p>This works fine, but the issue is speed.  If I hover over and out of the "magic" div too quickly, it never hides the popout.  It's as if the hide call is ignored because the show is still animating the slide.</p>

<p>The hover out method is being called correctly: I have put in logging code to make sure it is getting called.  So, the problem is that the hide does not cancel the show.  Is there a way to do this?</p>

<p>Thanks!</p>

<p>UPDATE:</p>

<p>I have included an example of my problem on jfiddle: <a href="http://jsfiddle.net/Pekf2/" rel="nofollow">http://jsfiddle.net/Pekf2/</a></p>

<p>Run your mouse down the red stripes.  You will see the green slide out, but not slide back if you're too fast (even with the stop() call).</p>
