Question

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:

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
);

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.

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?

Thanks!

UPDATE:

I have included an example of my problem on jfiddle: http://jsfiddle.net/Pekf2/

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).

Answer 1

Change to

$(this).children('.pop-out').stop().hide(...

This will stop the show animation and hide immediately.

EDIT: Not exactly sure why, but .stop does not play nice with .children like that. Using different selector syntax seems to make it work for whatever reason.

Additionally, since the animation is halted, it’s possible for the left CSS to become negative, so I added a callback on the .hide to set it to 0 once it’s complete.

http://jsfiddle.net/Pekf2/4/