在元素之间移动鼠标过快时出现jQuery悬停问题答案

【问题标题】：jQuery hover problem when moving mouse too quickly between elements在元素之间移动鼠标过快时出现jQuery悬停问题
【发布时间】：2011-11-17 18:18:09
【问题描述】：

我在一个页面上重复了以下 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 保持打开状态？

【问题讨论】：

我认为您很快（将更多内容添加到“内部”）必须将您的脚本完全更改为更“用户友好”的内容。

标签： javascript jquery animation hover

【解决方案1】：

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

$('.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/

【讨论】：

多么奇怪！我试过 .stop(true, true) 但用 .children - 我想知道为什么这不起作用......
它必须与 children() 相关，仅在 DOM 下一层；我希望内部 div 在动画时被包裹在某些东西中
PS：这仍然存在一个错误：如果您将鼠标向下穿过几个 div，然后停在其中一个较低的 div 内，则上面的外部 div 会随着内部动画而调整大小，而将鼠标留在您停止的 div 仍然有一个可见的内部。

【解决方案2】：

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

【讨论】：

【解决方案3】：

Animate() 是你想要的函数，我用这个函数用这种语法编写了我的导航系统：

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

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

显然你不想改变你的BG位置，你会在里面叫你滑动功能，但它是这种概念。

【讨论】：