鼠标移动时的动画菜单答案

【问题标题】：Animate Menu on Mouse movement鼠标移动时的动画菜单
【发布时间】：2013-03-21 17:50:33
【问题描述】：

我有一个功能，当鼠标移动到屏幕左侧时，我想从页面左侧进入菜单。并且当鼠标离开左侧时滑动离开页面左侧。

问题是因为该功能总是记录我的鼠标移动，如果鼠标移动它会记录它已经过了点并不断切换菜单。我需要它只在经过某个 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');

 }

});

【问题讨论】：

当你显示菜单时，你不想动画到右边，让你的声明sideMenu.animate({"left":"0px"}, 1000);吗？假设它开始于left:"-96px"。

标签： jquery mousemove

【解决方案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。

【讨论】：

我遇到的问题是它总是认为菜单是可见的，无论它是否移出屏幕？
糟糕，您似乎更新了您的问题。您应该在动画之后隐藏菜单，因为它会阻止菜单在您的 CSS 展示位置中被考虑。这样你就可以使用可见的选择器

【解决方案2】：

您可以添加一个切换布尔变量，该变量在事件激活时触发，并在鼠标移回该侧时更改。然后只需检查该变量的状态是否是动画即可。

【讨论】：

【解决方案3】：

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

您还可以添加一个类，并且仅在该类不存在时才运行开放代码。同样与关闭。仅在类存在时运行。

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

【讨论】：