jQuery geçiş animasyonunu başlat

Question

jQuery'yi kullanmayı öğrenmeye çalışıyorum ve bir sorunla karşılaştım. İlk olarak, size problemin neden olduğu kodun bir kısmını göstereceğim.

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

Başlangıçta kısmen ekranın dışına konumlandırılmış div #nav, istiyorum, div #arrow_container tıklandığında aşağı hareket ettirmek için. Daha sonra #arrow_container tekrar tıklandığında, #nav 'u orijinal konumuna yükseltmek istiyorum.

Şu anda, bu olmaz. Sorunun ne olduğunu ve nasıl tamir edebileceğimi söyler misin?

DÜZENLEME: a jsfiddle with the code, including some css

DÜZENLEME 2: sorun çözüldü gibi görünüyor. Ayrıca, kullanıcı adını unuttum ve cevabı silinen birine teşekkürler, ama bazı harika ipuçları vardı! Teşekkür ederim!

Answer 1

bu deneyin:

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

benim için ben her canlandırılır önce bir durdurma() etkinliği düzenlemek zorunda% 100'e çalışmadı. böylece:

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