在元素之间移动鼠标太快时jQuery悬停问题

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/

Answer 2

尝试使用animation()编写代码，这样你就可以随时stop()并设置默认样式。

Answer 3

Animate() is the function you want, I have written my navigation system using this functiong with this kind of syntax:

$("your-selecter").hover(function() {   

    $(this).stop().animate({
        backgroundPosition: '0 0'
    }, 600);
    }, function() {
       $(this).stop().animate({
            backgroundPosition: '0 -100px'
       }, 600); 
    });
};

Obviously you'd not want to change the BG position in yours, you'd call you slide function in there, but it's this kind of concept.