0

問題: 外側の div の上にマウスを移動すると、予想されるスライド メソッドがトリガーされますが、マウスが外側の div 内に移動すると、1 回ではなく複数回トリガーされます。イベントは子ではなく親要素にバインドされているため、バブルの問題ではないと思います。また、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(スライド アニメーションによって作成) がホバー状態をリセットしているようです。私が考えることができる1つのことは、このような変数でホバー状態を手動で覚えておくことです。ラメですが、動作します。
もっと優雅な解決策があるかどうかはわかりません。

于 2012-06-24T14:11:30.950 に答える
0

これを処理する 1 つの方法は、グローバルなブール変数を使用して、オブジェクトを既にスライドさせているかどうかを確認することです。

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 に答える