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) 和 else if (e.pageX == 101)。在 else 中，您运行类似于您现在所拥有的代码，以确保它关闭/打开以防这些数字未注册。

于 2013-03-21T17:56:01.810 回答