0

私の問題は、マウスを正方形の要素の上にすばやく移動してからカーソルを外に出すと、ホバー機能の「マウスアウト」部分が終了しないことがあるということです

私のHTML：

<div id="wrapper">
    <div id="o1" class="square"></div>
    <div id="o2" class="square"></div>
</div>

CSS

#wrapper {
    width: 100px;
    height: 100px;
    position: relative;
}
.square {
    width: 100px;
    height: 100px;
    position: absolute;
}
#o1 {
    background: red;
}
#o2 {
    background: blue;
    display:none;
}

Javascript:

$(function(){
    var o1 = $("#o1");
    var o2 = $("#o2");
    $('#wrapper').hover(function() {
        o1.fadeOut(400,function () {
            o2.fadeIn(400);
        });
    }, function() {
        o2.fadeOut(400,function () {
            o1.fadeIn(400);
        });
    });
});

jsFiddle: http://jsfiddle.net/TQ37t/

stop()コード内のさまざまな場所でさまざまなパラメーターを使用してみましたが、成功しませんでした。ありがとう

4

4 に答える 4

2

私が思いついた最も簡単な解決策は、新しいアニメーションを追加する前に、すべてのキューが停止していることを確認することでした:

var o1 = $("#o1");
var o2 = $("#o2");
$('#wrapper').hover(function() {
    o2.stop(true, true);
    o1.stop(true, true);
    o1.fadeOut(400,function () {
        o2.fadeIn(400);
    });
}, function() {
    o1.stop(true, true);
    o2.stop(true, true);
    o2.fadeOut(400,function () {
        o1.fadeIn(400);
    });
});

キューを停止するときは順序が重要であることに注意してください。次のシーケンスを検討してください。

    o1.fadeOut(400,function () {
        o2.fadeIn(400);
    });
    o2.stop(true, true); // at this point, o1 can still queue a new animation onto o2
        // at this point, o1 might finish fadeOut() and begin o2.fadeIn()
    o1.stop(true, true); // We should have stopped this one first
于 2012-11-02T00:26:00.130 に答える
1

同時に 2 つの異なるキューが実行されているため、それらを停止させることが問題でした。私が思いついた解決策の 1 つは、制御、停止などが可能な単一のキューを作成することでした。Javascript は次のようになります。

var o1 = $("#o1");
var o2 = $("#o2");
var wrapper = $('#wrapper');

function funcToFadeInOutDequeue(jq, isIn) {
    if (isIn) {
        return function() {
            jq.fadeIn(400, function() {
                wrapper.dequeue();
            });
        };
    } else {
        return function() {
            jq.fadeOut(400, function() {
                wrapper.dequeue();
            });
        };
    }
}

wrapper.hover(function() {
    wrapper.stop(true);
    wrapper.queue( funcToFadeInOutDequeue(o1, false) );
    wrapper.queue( funcToFadeInOutDequeue(o2, true) );
}, function() {
    wrapper.stop(true);
    wrapper.queue( funcToFadeInOutDequeue(o2, false) );
    wrapper.queue( funcToFadeInOutDequeue(o1, true) );
});

フィドルを参照してください...

于 2012-11-02T00:18:02.227 に答える
1

o1 が表示され、o2 が非表示になっているとします。すばやくホバリングすると、次のことが起こります。

  • o1 がフェードアウトし始める
  • o2 がフェードアウトし始めます - 即座に終了し、すでに隠れています
  • o2 がフェードアウトした結果、o1 はフェードインするように指示されます。
  • o1 がフェードアウトした結果、o2 はフェードインするように指示されます。

得られるのは、両方の形状が同時に表示されることです。これにより、後でさらに矛盾が生じます。

あなたがする必要があるのは、マウスが上にあるかどうかを定義するマウスオーバー/マウスアウトに設定するフラグを持つことです#wrapper。今と同じように、同様のフェードイン/フェードアウト命令もあります。ただし、コールバックの場合は、フラグを読み取り、どのオブジェクトをフェードインする必要があるかを判断する関数を実行します。 

$(function(){
    var o1 = $("#o1");
    var o2 = $("#o2");
    var over = false;
    choose = function() {
        if (over) {
            o2.fadeIn(400);
        } else {
            o1.fadeIn(400);
        }
    }
    $('#wrapper').hover(function() {
        over = true;
        o1.fadeOut(400,choose);
    }, function() {
        over = false;
        o2.fadeOut(400,choose);
    });
});

JSFiddle: http://jsfiddle.net/TQ37t/2/

于 2012-11-01T23:36:30.470 に答える
0

Stop は実際に問題を処理します (これが目的の効果である場合):

$(function(){
var o1 = $("#o1");
var o2 = $("#o2");
$('#wrapper').hover(function() {
    o1.fadeOut(400,function () {
        o2.fadeIn(400);
    });
}, function() {
    o1.stop();
    o2.fadeOut(400,function () {
        o1.fadeIn(400);
    });
});

}); </p>

http://jsfiddle.net/adam_gajzlerowicz/TQ37t/3/

于 2012-11-01T23:38:23.640 に答える