jQuery क्लिक टॉगल एनीमेशन

Question

मैं jQuery का उपयोग करने का तरीका सीखने की कोशिश कर रहा हूं, और मैंने किसी समस्या पर ठोकर खाई है। सबसे पहले, मैं आपको उस कोड का हिस्सा दिखाऊंगा जो समस्या का कारण बनता है।

एचटीएमएल

<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, जो शुरू में आंशिक रूप से स्क्रीन के बाहर रखा गया है चाहते हैं, नीचे जाने के लिए जब div #arrow_container क्लिक किया जाता है। फिर जब #arrow_container दोबारा क्लिक किया जाता है तो मैं अपनी मूल स्थिति में आगे बढ़ने के लिए #nav चाहता हूं।

फिलहाल, ऐसा नहीं होता है। क्या आप मुझे बता सकते हैं कि समस्या क्या है और मैं इसे कैसे ठीक कर सकता हूं?

संपादित करें: a jsfiddle with the code, including some css

संपादित करें 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; 
});