jquery 애니메이션이 올바르게 작동하지 않습니다.

Question

좋아요, 그래서 같은 클래스의 탐색 막대와 트리거가 있습니다. 내 생각에 트리거가 올려 졌을 때 jquery는 트리거와 탐색 막대가 움직이는 애니메이션을 보냅니다. 페이지 하단의 오버플로를 통해 숨겨집니다.

나는 jquery를 애니메이션으로 만들었지 만, 문제는 내가 트리거 위로 마우스를 가져간 다음 같은 클래스의 탐색 모음으로 이동하면 그것이 열린 상태로 유지되는 대신 바를 숨기는 동작을 다시 보냅니다. 그것 위에 마우스를 올리면. 두 항목을 모두 차지할 때까지 트리거와 탐색 막대를 한 번 열어 두는 방법을 모르겠습니다.

이 다음은 그 기본이다 (워드 프레스에서 작동의 그 이유는 jQuery를 통해 $) :

jQuery(document).ready(function() { 

    jQuery('.nav').hover(function() { 
     jQuery('.nav').animate({ 
      bottom: "0px" 
     }, 1500); 
    }, function() { 
     jQuery('.nav').animate({ 
      bottom: "-40px" 
     }, 1500); 
    });   
}); 

HTML :

<div class="nav nav-trigger" id="nav-trigger"><a href="#">Navigate</a></div> 
<div class="nav" id="nav-bar"><a href="#">Home</a></div> 

CSS :

.nav {position:absolute; bottom:-40px;} 
.nav-trigger {margin-left:50%; left:-100px;} 
#nav-trigger {height:80px; width:200px; background:#bd265e; color:#fff;} 
#nav-bar {height:40px; width:100%; background:#bd265e; color:#fff; text-align:center;} 

Answer 1

당신은이 개 .nav 요소를 가지고있다. 첫 번째 슬라이드 위로 마우스를 가져 가면 슬라이드가 올라가고 마우스가 첫 번째 슬라이드에서 두 번째 슬라이드로 이동하여 슬라이드가 내려가고 다른 슬라이드가 위로 움직입니다.

가장 간단한 해결책은 .stop 이전의 모든 애니메이션입니다. 당신은 새로운 시작 :

jQuery(document).ready(function() { 

    jQuery('.nav').hover(function() { 
     jQuery('.nav').stop().animate({ 
      bottom: "0px" 
     }, 1500); 
    }, function() { 
     jQuery('.nav').stop().animate({ 
      bottom: "-40px" 
     }, 1500); 
    }); 
}); 

http://jsfiddle.net/mblase75/LwyAB/

Answer 2

는 CSS와 함께 할!

http://jsfiddle.net/a7nM3/

호버의 래퍼 내부

넣어 모든

<div class="wrapper"> 
    <div class="nav nav-trigger" id="nav-trigger"><a href="#">Navigate</a></div> 
    <div class="nav" id="nav-bar"><a href="#">Home</a></div> 
</div> 

그리고 일부 전환

body 
{ 
    overflow:hidden; 
} 

.wrapper 
{ 
    position:absolute; 
    bottom:-40px; 
    width: 100%; 
    -o-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -webkit-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 

.wrapper:hover 
{ 
    bottom:0px; 
}