jQuery click toggle animation

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 #nav, который изначально позиционируется частично за пределами экрана, чтобы переместить вниз при ДИВЫХ #arrow_container кнопке. Затем, когда снова щелкнули #arrow_container, я хочу, чтобы #nav переместился вверх, в исходное положение.

В настоящий момент это не происходит. Можете ли вы рассказать мне, в чем проблема, и как я могу это исправить?

РЕДАКТИРОВАТЬ: 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; 
});