0

親 () の mouseenter によってトリガーされる jquery アニメーションがありますが、ユーザーが子 () でマウスを「小刻みに動かす」と、マウスアウトとマウスエンターを切り替えているかのようにアニメーションがちらつきます。

mouseenter は親で呼び出されます。なぜ子供にも付着するのですか？これを防ぐことができますか？

例：

http://jsfiddle.net/uqgz9/

私は .stopImmediatePropagation(); を調べました。および .stopPropagation(); それは正しい方向かもしれないと思いますが、必要な対話を得ることができません。

ありがとう。

4

3 に答える 3

2

.mouseleave()の代わりに使用.mouseout()

http://jsfiddle.net/uqgz9/4/

var imgW;

$('.brand-box-item').mouseenter(function(){
    if($(this).find('img').is(':animated') === false)
        imgW = $(this).find('img').width();        
    $(this).find('img').stop().animate({'width':'0','margin-left':(imgW/2)+'px'},function(){
        $(this).css({'margin-top':'-40px'});
        $(this).stop().animate({'width':imgW+'px','margin-left':'0'});
    });
});

$('.brand-box-item').mouseleave(function(){
    $(this).find('img').stop().animate({'width':'0','margin-left':(imgW/2)+'px'},function(){
        $(this).css({'margin-top':'0'});
        $(this).animate({'width':imgW+'px','margin-left':'0'});
    });
});

「mouseleave イベントは、イベント バブリングを処理する方法で mouseout とは異なります。この例で mouseout が使用された場合、マウス ポインターが内部要素の外に移動すると、ハンドラーがトリガーされます。これは通常、望ましくない動作です。mouseleave イベント一方、マウスが子孫ではなく、バインドされている要素を離れたときにのみハンドラーをトリガーします。したがって、この例では、マウスが外側の要素を離れたときにハンドラーがトリガーされますが、内側の要素ではトリガーされません。 -jQuery ドキュメント

于 2012-08-05T23:51:21.113 に答える
0

このコードをイベントに追加すると、ターゲット要素がセレクターの一部でない場合にイベントが停止します。

if (!$(e.target).is(this)) {
    return false;
}

デモ: http://jsfiddle.net/uqgz9/3/

マウスが親要素の境界線を通過すると、イベントが非常に迅速にトリガーされるため、イベントは引き続き発生します。

于 2012-08-05T23:49:42.697 に答える
0

受け入れられた回答で@nbrooksが述べていることと、コードは次のように単純化されます。

$('.brand-box-item').on('mouseenter mouseleave', function() {
    var imgW,
        $img = $(this).find('img');
    if (!$img.is(':animated')) {
        imgW = $img.width();
        $img.stop().animate({
            'width': 0,
            'margin-left': imgW / 2
        }, function() {
            $img.css({
                'margin-top': -40
            }).stop().animate({
                'width': imgW,
                'margin-left': 0
            });
        });
    }
});

デモ

IE9 および Opera 12.01 でテスト済み

于 2012-08-06T00:48:24.987 に答える