javascript - 在元素之间移动鼠标太快时出现 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)，它按预期工作:

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