चेतन div नीचे से jQuery

Question

में ऊपर से नीचे के बजाय ऊपर से मैं एक div जो जब एक क्लिक समारोह ट्रिगर अपने height को एनिमेट है:

$('#menu').click(function() { 
    $('#test').animate({ 
     height: 'toggle' 
    }, 290, function() {  
    }); 
}); 

अच्छा काम करता है अब तक। लेकिन मैं div को नीचे से ऊपर तक एनिमेट करना चाहता हूं और इस fiddle में दिखाई देने के विपरीत।

कोई समाधान?

Answer 1

आप एक कंटेनर और स्थिति में डाल सकता है यह बिल्कुल ?:

HTML:

<a href="#" id="menu">click me for menu</a> 
    <div id="cont"> 
    <div id="test"></div> 
</div> 

सीएसएस:

#cont{ 
    height:500px; width:50px; position:relative; 
} 
#test{ 
    height: 500px; width: 50px; background-color: #000; display: none; position:absolute; bottom:0; left:0; 
} 

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

$('#menu').click(function() { 
    $('#test').animate({ 
     height: 'toggle' 
     }, 290, function() { 
    }); 
}); 

Fiddle

संपादित करें: यह क्यों काम करता है
मैं मेनू के चारों ओर एक कंटेनर रखा जाता है और यह शैली position:relative दिया है। क्या मैं एक मेनू होने के लिए मान लेते हैं (#test) शैली position:absolute जिसका अर्थ है आप top, right, bottom और left के अनुसार यह स्थित कर सकते हैं प्रदान की गई है, जिसमें तत्व के सापेक्ष (बशर्ते यह इसलिए हम दे डिफ़ॉल्ट की तुलना में एक position अन्य है कंटेनर relative स्थिति)। यदि हम तत्व को top:0;left:0 देते हैं तो तत्व का शीर्ष बायां उसके माता-पिता के ऊपरी बाईं ओर चिपकेगा, इसी तरह, अगर हमने top:0;bottom:0 किया था तो इस तत्व का निचला बायां इसके माता-पिता के निचले बाएं हिस्से तक टिकेगा। रैंपलिंग, है ना? तो, संक्षेप में, #test अपने माता-पिता के निचले भाग में 'अटक गया' है, इसलिए यह नीचे से एनिमेट करता है। एक और त्वरित बिंदु, कंटेनर ऊंचाई महत्वपूर्ण है! चूंकि हमने #test को एक पूर्ण स्थिति दी है, यह कंटेनर को इसकी ऊंचाई पर धक्का नहीं देगी, इसलिए हम कंटेनर के शीर्ष से #test लोड 500px सुनिश्चित करने के लिए ऊंचाई निर्धारित करते हैं।