鼠标移动时的动画菜单
鼠标移动时的动画菜单
提问于 2013-03-22 01:50:34
我有一个功能，当鼠标移到屏幕的左侧时，我想从页面的左侧开始显示菜单。以及当鼠标从左侧移开时滑出页面左侧。
问题是因为这个功能总是记录我的鼠标移动，如果鼠标移动了，它会记录它已经超过了点，并不断切换菜单。我需要它只在菜单超过某个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');
} })；
回答 3
Stack Overflow用户
发布于 2013-03-22 02:00:20
听起来您只需要检查菜单是否正在显示。试试像这样的东西
$("#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。
Stack Overflow用户
发布于 2013-03-22 01:55:06
您可以添加一个切换布尔变量，该变量在事件被激活时触发，并在鼠标从该侧移开时更改。然后，只需检查该变量的状态是否为动画。
Stack Overflow用户
发布于 2013-03-22 01:56:02
也许您可以将一个不可见的绝对div放在左边，并使用mouseIn和mouseOut函数。
您还可以添加一个类，并仅在该类不存在时运行开放代码。收盘时也是如此。仅当类存在时才运行。
你也可以这样做(e.pageX == 99)或者if (e.pageX == 101)。在其他情况下，您可以运行与现在类似的代码，以确保它关闭/打开，以防这些数字没有注册。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15554652
复制相关文章
相似问题
腾讯云开发者
