0

问题：悬停在外部 div 上方会触发预期的滑动方法，但如果鼠标在外部 div 内移动，则不是一次而是多次。我不认为这是一个冒泡问题，因为该事件绑定到父元素而不是子元素。我还通过使用 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/

4

2 回答 2

0

看起来覆盖ui-effects-wrapper（由幻灯片动画创建）正在重置您的悬停状态。我能想到的一件事就是在这样的变量中手动记住悬停状态。蹩脚，但有效。
不确定是否有更亲切的解决方案。

于 2012-06-24T14:11:30.950 回答
0

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

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; }是否在正确的位置，但必须在动画完成时调用它。

于 2012-06-24T13:05:12.293 回答