jQuery .animate() सेट प्रदर्शित करता है: कोई नहीं, कैसे बचें?

Question

मैं निम्नलिखित कोड है:

HTML:

<div id="clickme"> 
    Click me :-) 
</div> 

<div id="info" style="background:red; width:100%; height:100px; margin-bottom:-100px; z-index:20; position:absolute; bottom:0px;"> 
    Stay, damn! 
</div> 

जावास्क्रिप्ट:

$('#clickme').click(function() { 
    $('#info').animate({ 
     marginBottom: 'toggle' 
    },{ 
     duration:500 
    }); 
}); 

यह भी उपलब्ध है पर http://jsfiddle.net/DxnQJ/

जाहिर है, मैं प्रकट करने के लिए #info DIV चाहते/गायब हो जाते हैं जब भी #clickme DIV क्लिक किया गया है। यह इरादे के रूप में काम कर रहा है, सिवाय इसके कि #info DIV एनीमेशन के बाद गायब हो गया है क्योंकि jQuery ने इसकी सीएसएस display संपत्ति none पर सेट की है।

मैं अपने DIV को छिपाने से रोकने के लिए jQuery को कैसे बता सकता हूं?

Answer 1

मैं .slideToggle का उपयोग कर की सिफारिश करेंगे:

$('#clickme').click(function() { 
    $('#info').slideToggle(500); 
}); 

डेमो: http://jsfiddle.net/Daniel_Hug/DxnQJ/2

Answer 2

जावास्क्रिप्ट कोड

$('#clickme').toggle(
     function() { 
      $('#info').animate({ 
       height:"0px" 
      }, 500); 
     }, 
     function() { 
      $('#info').animate({ 
       height:"100px" 
      }, 500); 
     }); 

http://jsfiddle.net/amkrtchyan/zymUK/2/

Answer 3

इस के साथ आपके क्लिक समारोह की जगह काम करता है:

$('#clickme').click(function() { 
     var whichSetting = $('#info').css('marginBottom'); 
     if(whichSetting == '-100px') { 
      whichSetting = '0px'; 
     } 
     else { 
      whichSetting = '-100px'; 
     } 
     $('#info').animate({ 
      marginBottom: whichSetting 
      },{ 
       duration:500 
     }); 

    });