내 메뉴 항목을 입력 할 때 메뉴 항목이 한 번 안에 다시 실행되는 것을 방지합니다.

Question

내 숨겨진 div가 멋지게 굴려서 나간다가 반동합니다.

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

그래서 난 노력하고있어 : 이미 다음 불행하게도 다시 화재를 맨 위로 메뉴 항목을 다시 입력 컨테이너 주위에 마우스를 가져 가면과 같이 아래로 다시 숨겨진 컨테이너를 슬라이드하는 경우 문제는 해야 할 일은 컨테이너가 계속 보이면 항목이 이미 표시되어 있는지 확인하는 테스트입니다. 어떤 도움이 크게 감사합니다

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

: 그 얻을 수

가까운이 있습니다.

Answer 1

와

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

합니다. 또한 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>  

자바 스크립트

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} 

,363,210

이처럼 : 당신이 그것을 설치 여기 jsfiddle 확인해있는 방법을 해결하기 위해 자바 스크립트

$('#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); 
});