jQuery 클릭 애니메이션 전환

Question

jQuery 사용법을 배우려고하고 있는데 문제가 발생했습니다. 먼저 문제의 원인이되는 코드 부분을 보여 드리겠습니다.

HTML

<div id="nav"> 
<div id="button"><p class="scroll" onclick="location.href='#ed';">Education</p></div> 
<div id="button"><p class="scroll" onclick="location.href='#wxp';">Work Experience</p></div> 
<div id="button"><p class="scroll" onclick="location.href='#oact';">Other Activities</p></div> 
<div id="button"><p class="scroll" onclick="window.open('cv.pdf','mywindow');">View as PDF</p></div> 
<div id="arrow_container"><div class="arrow" id="down"></div></div> 

jQuery를

$(document).ready(function(){ 
$("#arrow_container").toggle(
    function() { 
    $("#nav").animate({marginTop:"0px"}, 200); 
     }, function() { 
    $("#nav").animate({marginTop:"-100px"}, 200); 
    }); 
}); 

내가 처음에 부분적으로 화면의 외부에 위치 사업부 #nav을 원하는, DIV #arrow_container을 클릭하면 아래로 이동합니다. 그런 다음 #arrow_container을 다시 클릭하면 #nav이 원래 위치로 이동하기를 원합니다.

현재로서는 이러한 상황이 발생하지 않습니다. 문제가 무엇이고 어떻게 해결할 수 있는지 말해 줄 수 있습니까?

편집 : a jsfiddle with the code, including some css

편집 2 : 문제는 해결 될 것으로 보인다. 또한 사용자 이름을 잊어 버리고 답변을 삭제 한 사람 덕분에 도움을 받았지만 좋은 팁이있었습니다! 고맙습니다!

Answer 1

이 시도 :

$("#arrow_container").click(function(event){ 
    event.preventDefault(); 
    if ($(this).hasClass("isDown")) { 
     $("#nav").stop().animate({marginTop:"-100px"}, 200);        
    } else { 
     $("#nav").stop().animate({marginTop:"0px"}, 200); 
    } 
    $(this).toggleClass("isDown"); 
    return false; 
}); 

http://jsfiddle.net/us6sohyg/5/

Answer 2

나를 위해 그 내가 모든 애니메이션 전에 정지() 이벤트를 편집했다 100 % 작동하지 않았다. 너무 :

$("#arrow_container").click(function(event){ 
event.preventDefault(); 
if ($(this).hasClass("isDown")) { 
    $("#nav").stop().animate({marginTop:"0px"}, 200);   
    $(this).removeClass("isDown"); 
} else { 
    $("#nav").stop().animate({marginTop:"-100px"}, 200); 
    $(this).addClass("isDown"); 
} 
return false; 
});