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

Question

我在页面上多次重复以下 html:

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

并使用此 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);
});

正如您在此处看到的： http:// /jsfiddle.net/342q3/15/ 在div之间缓慢移动鼠标（等待动画完成）可以达到一次只显示一个内部div的预期效果。

但是，如果您在 div 之间快速移动鼠标，所有内部 div 仍然可见。

我尝试过使用 stop() 函数但没有成功。 如何防止内部 div 保持打开状态？

Answer 1

如果您在开始新动画（滑出）之前停止动画并使用 find 而不是 children （不知道为什么它不适用于 children< /code>），它按预期工作：

$('.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() 是你想要的函数，我已经使用这个 functiong 和这种语法编写了我的导航系统：

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

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

显然你不想改变你的 BG 位置，你会在那里调用你的幻灯片函数，但它是这种概念。