jQueryUI-将鼠标悬停在父元素上会触发在子元素上向下滑动

问题：将鼠标悬停在外部div上方会触发预期的滑动方法，但如果鼠标在外部div内移动，则不会触发一次而是多次。我认为这不是冒泡问题，因为事件绑定到父元素而不是子元素。此外，我还使用stopPropagating（）防止事件“冒泡”

以下是html标记：

<div class="outer">
    <div class="inner">Lorem ipsum dol
    <div class="clear"></div></div>
</div><div class="clear"></div>

还有jquery

$(".outer").hover(function(e){
    e.stopPropagation();
    //$(".inner").fadeOut("slow");
    $(".inner").stop(true, true).hide("slide", {direction: "down"}, "slow");
}, function(e){
    e.stopPropagation();
    //$(".inner").fadeIn("slow");
    $(".inner").stop(true, true).show("slide", {direction: "down"}, "slow");
});

顺便说一句，注释后的代码运行良好

---

jsiddle link:

处理此问题的一种方法是使用全局布尔变量来确定是否已经在滑动对象：

var sliding = false;
$(".outer").hover(function(e){
    e.stopPropagation();
    //$(".inner").fadeOut("slow");
    if(!sliding) {
        sliding = true;
        $(".inner").stop(true, true).hide("slide", {direction: "down"}, "slow", function() { sliding = false; });
    }
}, function(e){
    e.stopPropagation();
    //$(".inner").fadeIn("slow");
    if(!sliding) {
        sliding = true;
        $(".inner").stop(true, true).hide("slide", {direction: "down"}, "slow", function() { sliding = false; });
    }
});

---

我不确定

函数（）{slide=false；}

是否位于正确的位置，但必须在动画完成时调用它。

看起来覆盖

ui效果包装器（由幻灯片动画创建）正在重置悬停状态。我能想到的一件事就是在变量中手动记住悬停状态，比如。跛脚，但有效。

不确定是否有更优雅的解决方案。
添加一个js fiddle链接，应该很容易，因为您已经隔离了问题部分。
var sliding = false;
$(".outer").hover(function(e){
    e.stopPropagation();
    //$(".inner").fadeOut("slow");
    if(!sliding) {
        sliding = true;
        $(".inner").stop(true, true).hide("slide", {direction: "down"}, "slow", function() { sliding = false; });
    }
}, function(e){
    e.stopPropagation();
    //$(".inner").fadeIn("slow");
    if(!sliding) {
        sliding = true;
        $(".inner").stop(true, true).hide("slide", {direction: "down"}, "slow", function() { sliding = false; });
    }
});