jquery ui - 将鼠标悬停在父元素上应该触发在子元素上向下滑动

Question

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

这是 html 标记:

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

和CSS:

.outer {
    float: left;
    width: 220px;
    height: 200px;
    background-color: #06F;
}
.inner {
    float: left;
    width: 220px;
    height: 99px;
    background-color: #0F6;
    margin-top: 100px;
}

和 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");
});

顺便说一句，注释代码工作正常。

jsfiddle 链接:http://jsfiddle.net/94hvS/

Answer 1

处理此问题的一种方法是使用全局 bool 变量来了解您是否已经在滑动对象:

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; });
    }
});

我不确定 function() { sliding = false; 在正确的地方，但必须在动画完成时调用。