0

ページのスクリプトに問題があるため、ここに再度書き込みます。メニュー フォーカスに 1 つ問題があり、1 週間か 2 週間前にこのフォーラムに書きましたが、1 人のユーザーに 1 つのバグがあり、それを解決する方法がわかりません。もっともらしい解決策をたくさん試しましたが、問題は解決しません。

ここに私の問題をシミュレートする Fiddle のコードがあります: http://jsfiddle.net/PRZYN/15/

$(document).ready(function() {
    $('#handle').mouseenter(slideIn);
    $("#box").mouseleave(function() {
        $(this).animate({
            left: "-=180px"
        }, "fast");
        $('#handle').mouseenter(slideIn);
    });
    $("[name='skin']").mouseleave(function(e) {
        e.stopPropagation();
    });

});

function slideIn() {
    if ($("#box")) $("#box").animate({
        left: "+=180px"
    }, "slow");
    $(this).unbind("mouseenter");
}

ご覧のとおり、1 つの div (左側のメニュー ポップアップを表示する青緑色のもの) があり、div がフォーカスを取得すると表示され、div がフォーカスを失ったときに非表示になります。

このスクリプトの問題は、いつこの 2 つの div がアニメーション状態になるかということです。ユーザーがフロント エンド アニメーションとバックエンド アニメーションの間でマウスを非常に速く動かすと、スクリプトが混乱し、メニューの表示と非表示が開始され、非常に煩わしくなります。また、メニューに同じバグが発生する他の方法もいくつかありますが、私はそれをうまく見つけられませんでした. この問題は、ユーザーがこのdivにカーソルを合わせてマウスをどこかで停止させたときにも発生すると思います-これは時々異なります。

なんとか問題を特定しましたが、解決方法がわかりません。メニューがアニメーション状態にあるとき、およびマウスがdivの上にないときに要素に対して、このdivの他のすべてのイベントを無効にする必要があります(ただし.animation()ではありません)。

私の質問を理解していただければ幸いです。問題を解決する方法について誰かが私を助けてくれれば幸いです。

よろしく、ミハ

4

1 に答える 1

1

を使用.stop()して、アニメーション キューをキャンセルし、ユーザーが要素の操作を停止した後にアニメーションが実行されないようにすることができます。また、 に固定値を使用することをおleft勧めします。+=とを使用-=すると、コンテナーにすばやくマウスを出し入れした後にボックスが正しく配置されなくなります。つまり、"-180px"や"0px"の代わりに"-=180px"やなどの値を使用します"+=180px"。

JSFiddle: http://jsfiddle.net/PRZYN/16/

于 2012-11-29T09:23:52.980 に答える