鼠標移動的動畫菜單

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

您可以添加一個切換布爾變量，該事件在事件被激活時觸發，並在鼠標從該側移回時發生變化。然後，只需檢查該變量的狀態是否爲什麼，以查看是否設置了動畫。

Answer 2

也許你可以在左邊放一個不可見的絕對div，並使用mouseIn和mouseOut函數。

您也可以添加一個類，並且只在該類不存在的情況下運行開放代碼。同樣靠近。只有在課程存在時才運行。

你也可以做（e.pageX == 99），否則if（e.pageX == 101）。在其他情況下，您運行的代碼與您現在擁有的代碼類似，以確保它關閉/打開這些數字未註冊。

Answer 3

這聽起來像你只需要檢查菜單是否顯示。嘗試像

$("#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。