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); 
    }); 
}); 

私は最初のdiv #arrow_containerをクリックしたときに下に移動し、画面の外に部分的に配置されたdivの#navを、したいです。その後、#arrow_containerをもう一度クリックすると、#navが元の位置に移動します。

現時点では、このようなことは起こりません。あなたは問題が何であり、どのように修正できるのか教えていただけますか？

EDIT：a jsfiddle with the code, including some css

EDIT 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; 
});