jQuery click attiva/disattiva animazione

Question

Sto cercando di imparare come usare jQuery e mi sono imbattuto in un problema. Prima di tutto, ti mostrerò la parte del codice che causa il problema.

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

Voglio che il div #nav, che inizialmente è posizionato parzialmente al di fuori dello schermo, a muoversi verso il basso quando div #arrow_container viene cliccato. Quindi, quando si fa nuovamente clic su #arrow_container, voglio che #nav si sposti in su, nella sua posizione originale.

Al momento, non succede questo. Puoi dirmi qual è il problema e come posso risolverlo?

EDIT: a jsfiddle with the code, including some css

EDIT 2: Il problema sembra essere risolto. Grazie anche a qualcuno il cui nome utente che ho dimenticato e risposta è stato cancellato, ma ha ricevuto ottimi consigli! Grazie!

Answer 1

Prova questo:

$("#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

per me che non ha funzionato al 100% ho dovuto modificare un evento di stop() prima di ogni animato. così:

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