blocks|key|1407856|text|您可以添加一个切换布尔变量，该变量在事件被激活时触发，并在鼠标从该侧移开时更改。然后，只需检查该变量的状态是否为动画。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1407857|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You could add a toggle boolean variable that triggers when the event is activated and changes when the mouse moves back away from that side. Then just check with an if what's the status of that variable to see if you animate or not.

blocks|key|1508250|text|也许您可以将一个不可见的绝对div放在左边，并使用mouseIn和mouseOut函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1508251|您还可以添加一个类，并仅在该类不存在时运行开放代码。收盘时也是如此。仅当类存在时才运行。|1508252|你也可以这样做(e.pageX+==+99)或者if+(e.pageX+==+101)。在其他情况下，您可以运行与现在类似的代码，以确保它关闭/打开，以防这些数字没有注册。|1508253|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

Perhaps you could put an invisible, absolute div to the left and use the mouseIn and mouseOut functions.

You could also add a class and only run the open code if the class is non-existent. Likewise with the close. Only run when the class exists.

You could also maybe do (e.pageX == 99) and else if (e.pageX == 101). In the else you run code similar to what you have now to make sure it closes/opens incase those numbers didnt register.

blocks|key|1508255|text|听起来您只需要检查菜单是否正在显示。试试像这样的东西|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1508256|+$("#gridcontainer").mousemove(function(e){

++++var+pageCoords+=+"(+"+%2B+e.pageX+%2B+",+"+%2B+e.pageY+%2B+"+)";
++++var+clientCoords+=+"(+"+%2B+e.clientX+%2B+",+"+%2B+e.clientY+%2B+"+)";
++++$("span:first").text("(+e.pageX,+e.pageY+)+:+"+%2B+pageCoords);
++++$("span:last").text("(+e.clientX,+e.clientY+)+:+"+%2B+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');

+++++}+|code-block|syntax|javascript|1508257|您甚至可以让show()函数为您制作动画。有关示例，请参阅here。|offset|length|1508258|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/show/^0|0|0|T|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

It sounds like you just need to check if the menu is being shown. Try something like 

<pre><code> $("#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 &lt; 100 &amp;&amp; $('.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');

 } 
</code></pre>

You could even have your show() function do the animation for you. See <a href="http://api.jquery.com/show/" rel="nofollow">here</a> for some examples.

I have a function that i would like a menu in from the left side of the page when the mouse is moved to the left side of the screen. And the slide off the left side of the page when the mouse is moved away from the left side.

The issue is since the function is always recording my mouse movements, if the mouse if moved it will register it is past the point and constantly toggle the menu. I need it to only toggle the menu when it goes past a certain X-coordinate

JS: (EDITED CODE)

<pre><code>$("#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 &lt; 100 &amp;&amp; $('.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');

 } 
</code></pre>

});

Animate Menu on Mouse movement

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个功能，当鼠标移到屏幕的左侧时，我想从页面的左侧开始显示菜单。以及当鼠标从左侧移开时滑出页面左侧。问题是因为这个功能总是记录我的鼠标移动，如果鼠标移动了，它会记录它已经超过了点，并不断切换菜单。我需要它只在菜单超过某个X坐标时切换菜单JS：(编辑代码)$("#gridcontainer").mousemove(f...

问鼠标移动时的动画菜单
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问鼠标移动时的动画菜单EN