0

マウスを画面の左側に移動すると、ページの左側からメニューを表示したい機能があります。また、マウスをページの左側から離すと、ページの左側からスライドします。

問題は、関数が常にマウスの動きを記録しているためです。マウスを動かした場合、マウスがポイントを過ぎて登録され、常にメニューがトグルされます。メニューが特定のX座標を超えたときにのみメニューを切り替える必要があります

JS: (編集されたコード)

$("#gridcontainer").mousemove(function(e){

 var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
 var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
 $("span:first").text("( e.pageX, e.pageY ) : " + pageCoords);
 $("span:last").text("( e.clientX, e.clientY ) : " + clientCoords);

 var sideMenu = $('.side-menu');

 if (e.pageX < 100 && $('.side-menu').is(":visible")){
    console.log('make visible');
    sideMenu.animate({"left":"-96px"}, 1000);

 }
 else if(!$('.side-menu').is(":visible")){
    sideMenu.animate({"left":"-96px"}, 1000);
    console.log('hide');

 }

});

4

3 に答える 3

1

メニューが表示されているかどうかを確認する必要があるようです。次のようなものを試してください

 $("#gridcontainer").mousemove(function(e){

    var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
    var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
    $("span:first").text("( e.pageX, e.pageY ) : " + pageCoords);
    $("span:last").text("( e.clientX, e.clientY ) : " + clientCoords);

    var sideMenu = $('.side-menu');

    if (e.pageX < 100 && $('.side-menu').is(":visible")){
       console.log('make visible');
       sideMenu.show();
       sideMenu.animate({"left":"-96px"}, 1000);

    }
    else if(!$('.side-menu').is(":visible")){
       sideMenu.animate({"left":"-96px"}, 1000);
       sideMenu.hide();
       console.log('hide');

     }

show() 関数にアニメーションを実行させることもできます。いくつかの例については、こちらを参照してください。

于 2013-03-21T18:00:20.403 に答える
0

イベントがアクティブ化されたときにトリガーされ、マウスがその側から離れたときに変更されるトグルブール変数を追加できます。次に、その変数のステータスを確認して、アニメーション化するかどうかを確認します。

于 2013-03-21T17:55:06.467 に答える
0

おそらく、非表示の絶対 div を左側に配置して、mouseIn および mouseOut 関数を使用できます。

クラスを追加して、クラスが存在しない場合にのみオープン コードを実行することもできます。クローズも同様です。クラスが存在する場合にのみ実行します。

また、(e.pageX == 99) を行うこともできますし、そうでなければ (e.pageX == 101) を行うこともできます。それ以外の場合は、現在持っているものと同様のコードを実行して、それらの番号が登録されていない場合に確実に閉じる/開くようにします。

于 2013-03-21T17:56:01.810 に答える