Question

我有一个功能，当鼠标移动到屏幕左侧时，我希望页面左侧有一个菜单。当鼠标从左侧移开时，滑动页面左侧。

问题在于，因为该功能始终记录我的鼠标移动，如果鼠标移动它将注册它超过该点并不断切换菜单。我需要它只在菜单超过某个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');

 }

}）;

Answer 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（）函数为你做动画。有关示例，请参阅here。

Answer 2

您可以添加一个触发器布尔变量，该变量在事件激活时触发，并在鼠标从该侧移回时发生变化。然后检查一下if变量的状态是什么，看你是否动画。

Answer 3

也许您可以在左侧放置一个不可见的绝对div并使用mouseIn和mouseOut函数。

如果该类不存在，您还可以添加一个类并仅运行打开的代码。同样关闭。仅在类存在时运行。

您也可以（e.pageX == 99）和if（e.pageX == 101）。在else中你运行类似于你现在的代码，以确保它关闭/打开，但这些数字没有注册。

鼠标移动时的动画菜单

3 个答案: