Question

I have the following html repeated many times on a page:

<div class="outer">
    outer
    <div class="inner">
        inner
   </div>
</div>

and have this jQuery:

$('.inner').hide();
$('.outer').hover(function(e) {
    $(this).children('.inner').show("slide", {
        direction: "right"
    }, 1000);
}, function(e) {
    $(this).children('.inner').hide("slide", {
        direction: "right"
    }, 1000);
});

As you can see here: http://jsfiddle.net/342q3/15/ moving the mouse slowly between the divs (waiting for the animation to complete) achieves the desired effect of displaying only one inner div at a time.

However if you move the mouse quickly between the divs, all the inner divs remain visible.

I’ve tried using the stop() function but without success. How can I prevent the inner divs from remaining open?

Answer 1

If you stop the animation before you start the new one (sliding out) and use find instead of children (no idea why it doesn’t work with children), it works as supposed:

$('.inner').hide();
$('.outer').hover(function(e) {
    $(this).find('.inner').stop(true, true).show("slide", {
        direction: "right"
    }, 1000);
}, function(e) {
    $(this).find('.inner').stop(true, true).hide("slide", {
        direction: "right"
    }, 1000);
});

http://jsfiddle.net/AVLdW/