jQuery kliknij, aby włączyć animację

Question

Próbuję nauczyć się korzystać z jQuery i natknąłem się na problem. Po pierwsze, pokażę ci część kodu, która powoduje problem.

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

chcę div #nav, która początkowo jest umieszczony częściowo na zewnątrz ekranu, aby przejść w dół, gdy div #arrow_container kliknięciu. Kiedy kliknie się ponownie #arrow_container, chcę, aby #nav przesunął się w górę, do swojej pierwotnej pozycji.

W tej chwili nie dzieje się to. Czy możesz mi powiedzieć, jaki jest problem i jak mogę to naprawić?

Edycja: a jsfiddle with the code, including some css

EDIT 2: problem wydaje się być rozwiązany. Również dzięki temu ktoś, kogo nazwa użytkownika zapomniałem i odpowiedziałem, został usunięty, ale miał kilka świetnych wskazówek! Dziękuję Ci!

Answer 1

Spróbuj tego:

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

dla mnie, że nie działa na 100% musiałem edytować stop() zdarzenie przed każdym ożywionej. tak:

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