防止菜單項在內部重新啓動後

Question

進入我的菜單項後，我的隱藏分區很好地滾動，然後如果離開，則會反衝。問題是，如果你已經在容器周圍移動鼠標，然後再進入菜單項上最糟糕的是不幸的是重新火災，並再次向下滑動隱藏的容器是這樣的：

http://jsfiddle.net/NAyWQ/17/

所以我嘗試要做的就是測試一下，看看這個物品是否已經可見，是否只是繼續展示容器。

這是我所能達到那個是這樣的：

http://jsfiddle.net/NAyWQ/18/

任何幫助是極大的讚賞。

Answer 1

爲了解決您有它設置檢查出來這裏jsfiddle的方式。如果你想要在主菜單中包含dropdwon菜單，Hogan也給了你一個很好的答案。否則，我只需在#dd_about上添加一個stop(true, true)調用即可停止動畫。

Answer 2

這工作：

http://jsfiddle.net/DLFm3/

HTML：

<div id="container"> 
    <div id="header"> 
     <div id="boundary"></div> 
     <div id="menu"> 
      <div id="about"> 
       <div id="dd_about"></div> 
      </div> 
     </div> 
    </div> 
</div>  

的JavaScript

var menustate = "hidden"; 

$('#about').bind('mouseenter', function() {  

    if (menustate == "hidden") 
    { 
     $('#dd_about').slideDown('fast'); 
     menustate = "shown"; 
    } 
}); 


$('#about').bind('mouseleave', function() { 
     $('#dd_about').slideUp('fast'); 
    menustate = "hidden"; 
});​ 

CSS

#container { 
    width:500px; 
    margin:0 auto; 
    position:relative;  
} 

#header { 
    width:100%; 
    height:50px; 
    background:blue; 
    position:relative; 
} 

#boundary { 
    width:320px; 
    height:60px; 
    bottom:0; 
    right:0; 
    position:absolute; 
    background:purple; 

} 

#menu { 
    width:100px; 
    height:40px; 
    position:absolute; 
    right:10px; 
    top:10px; 
} 

#about { 
    width:100px; 
    height:40px; 
    float:left; 
    background:yellow; 

} 

#dd_about { 
    top : 40px; 
    left : 0px; 
    width:100px; 
    height:200px; 
    position:absolute; 
    background:red; 
    display:none; 
} 

#dd_about {right:10px} 

爲做到這一點：

http://jsfiddle.net/DLFm3/1/

與此javascript

$('#about').bind('mouseenter', function() {  

     $('#dd_about').slideDown('fast'); 
}); 


$('#about').bind('mouseleave', function() { 
     $('#dd_about').slideUp('fast'); 
});​ 


​ 

Answer 3

這裏的工作演示http://jsfiddle.net/NAyWQ/21/

此示例使用標誌變量來檢查當前懸停狀態

var hover = false; 

$('#about').bind('mouseenter', function() {  
    hover = true; 
    $('#dd_about').slideDown('fast'); 
}); 

$('#boundary').bind('mouseenter', function() { 
    hover = false; 
    $('#dd_about').slideUp('fast'); 
}); 

$('#dd_about').bind('mouseleave', function() { 
    hover = false; 
    setTimeout(function() { 
     if (hover) return false; 
     $('#dd_about').slideUp('fast'); 
    }, 50); 
});