顯示當鼠標在屏幕左側的菜單Jquery

我試圖顯示左側菜單，當鼠標光標靠近然後20px到屏幕的左側。我希望菜單在鼠標懸停時保持不變。顯示當鼠標在屏幕左側的菜單Jquery

此代碼不適合我。

$(document).ready(function(){ 
    $("#lmenu").hide(300); 
    $(document).mousemove(function(e){ 
     if(e.pageX<20 || $("#lmenu").is(':hover')) $("#lmenu").show(200);//html(e.pageX +', '+ e.pageY); 
     else if(!$("#lmenu").is(':hover')) setTimeout(function(){ $("#lmenu").hide(200); }, 2000); 
    }); 
});

來源

2013-08-01 AnKing

你的問題是，每次你移動鼠標，鼠標是不是在菜單或更遠，然後從屏幕右邊緣20像素 - 一個的setTimeout被激發。所有這些超時都會進入隊列並在隨後發射。這就是爲什麼你會得到「閃爍」的效果。

來源

2013-08-01 15:39:49

您可以使用類似的代碼如下：

var menu = $('.menu'); 
var menuTimeout = null; 

$(window).on('mousemove', mouseMoveHandler); 

function mouseMoveHandler(e) { 
    if (e.pageX < 20 || menu.is(':hover')) { 
     // Show the menu if mouse is within 20 pixels 
     // from the left or we are hovering over it 
     clearTimeout(menuTimeout); 
     menuTimeout = null; 
     showMenu(); 
    } else if (menuTimeout === null) { 
     // Hide the menu if the mouse is further than 20 pixels 
     // from the left and it is not hovering over the menu 
     // and we aren't already scheduled to hide it 
     menuTimeout = setTimeout(hideMenu, 2000); 
    } 
}

它應該是什麼明顯的功能showMenu和hideMenu做。

這是一個完整的demo。

來源

2013-08-01 15:46:40

我想要做的是後2秒將其隱藏。 – AnKing

你應該在問題中說明。 –

我已經更新過，在隱藏菜單之前包含2s超時。 –

我一般像樣的成績做這樣的事情：

$(document).ready(function(){ 
    $("#lmenu").hide(300); 
    $("#lmenu").mouseover(function(){ 
     $(this).data("hover",true); 
    }).mouseout(function(){ 
     $(this).removeData("hover"); 
    }); 
    $(document).mousemove(function(e){ 
     console.log(e.pageX); 
     if ((e.pageX < 20 || $("#lmenu").data("hover")) && !$("#lmenu").data("displayed")) { 
      window.clearTimeout(window.hideMenu); 
      $("#lmenu").stop().show(200).data("displayed",true); 
     } else if ($("#lmenu").data("displayed")) { 
      window.clearTimeout(window.hideMenu); 
      $("#lmenu").removeData("displayed"); 
      window.hideMenu = window.setTimeout(function(){ 
       $("#lmenu").stop().hide(200); 
      },2000); 
     } 
    }); 
});

小提琴：http://jsfiddle.net/zXDB3/

來源

2013-08-01 15:47:15

這個不起作用 – AnKing

它適用於我的Chrome ... –

的HTML：

<div id="menuHidden" class="menu"></div>

的CSS：

#menuHidden{ 
    height:200px; 
    width:200px; 
    background-color:purple; 
    position:absolute; 
    left:0; 
    top:0; 
    display:none; 
}

第j查詢：

$(document).on("mousemove", function(e){ 
    if(e.pageX <= 100) 
    { 
     $("#menuHidden").show(); 
    } 
    else 
    { 
     if(!$(e.target).is(".menu")) 
     { 
      $("#menuHidden").hide(); 
     } 
    } 
});

如何看起來： http://jsfiddle.net/nnmMe/

來源

2013-08-01 15:50:50 Majo0od

我更喜歡用一個元素（透明）和捕捉到的懸停事件就可以了。

這樣的：

<aside class="bar hover-me"></aside>

CSS

.bar { 
     background-color: transparent; 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     z-index: 1; 
     width: 20px; 
    }

$('.hover-me').mouseover(function(){ 
    $("#lmenu").show(); 
}); 
$("#lmenu").mouseleave(function(){ $(this).hide(); })

來源

2015-07-23 22:29:32

顯示當鼠標在屏幕左側的菜單Jquery

回答

相關問題