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

解决方法:

如果你在开始新动画之前停止动画(向外滑动)并使用find代替孩子(不知道为什么它不能与儿童一起使用),它会按照假设：

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