2011-03-18 10 views
5

मैं नीचे इस DIV 0px ऊंचाई शुरू में है कि स्लाइड करने के लिए (शो) हैं:कैसे jQuery की .slideDown/Up() अज्ञात (ऑटो) ऊंचाई पर स्लाइड संभालती है?

<div id="toslide" style="height:0px;overflow:hidden;"> ... various content </div>

हालांकि अंतिम ऊंचाई क्योंकि विभिन्न स्क्रीन चौड़ाई, फ़ॉन्ट आकार और अन्य सामग्री पर अंदर लेआउट को प्रभावित नहीं जाना जाता है और इसलिए लक्ष्य ऊंचाई।

अगर मुझे इसे मैन्युअल रूप से करना होगा, तो मैं इसे visibility:hidden; के साथ दिखाता हूं, ऊंचाई मापता हूं और फिर animate इसे पता ऊंचाई तक (हालांकि, यह भी दोष है)।

मेरे पास jQuery के .slideDown() के साथ मिश्रित परिणाम हैं - यह प्रलेखन में काम करता है, लेकिन यह मेरे लिए इस विशेष मामले में काम नहीं करता है।

jQuery अंतिम ऊंचाई को कैसे जान सकता है?

संपादित करें: एक वर्कअराउंड height:auto; के साथ एक और आंतरिक div होना है जिसका उपयोग ऊंचाई को मापने के लिए किया जाएगा।

+0

कोई जवाब नहीं है लेकिन यदि आप जानना चाहते हैं कि एक jQuery फ़ंक्शन कैसे काम करता है: http://james.padolsey.com/jquery/ –

उत्तर

-1
यह में तत्वों की

आप .height मिलना चाहिए(), उन योग और div कि ऊंचाई :)

http://api.jquery.com/height/

+0

यह फ़्लोट्स के कारण बहुत कमजोर समाधान है। – tillda

0

इसमें कुछ समय एक पुराने सवाल यह है की ऊंचाई बनाते हैं। मैं मूल रूप से एक ही समस्या का जवाब ढूंढ रहा था, आपका संपादन बिल्कुल ठीक था जिसे मैं ढूंढ रहा था।

JSFiddle for all the goodies

$("a#moreRequests").on("click", function(){// click this and the div grows 

//console.log("this hits"); 
var friends = $(".friendsDiv"); 
var divHeight = $(".auto").height(); 

if(friends.hasClass("grow")){// if the div has the class grow on it, then shrink 
    friends.animate({ 
    height: "100px" 
    },1000, function(){ 
    console.log("this is if it has the class .grow,"); 
    }).removeClass("grow"); 
} 
else{ 
    friends.animate({ 
    height: divHeight 
    },1000, function(){ 
    console.log("this is if it doesn't has the class .grow div height: " + divHeight); 
    }).addClass("grow"); 
} 
return false; 
}); 

आशा है कि एक ही मुद्दे के साथ किसी को भी मदद करता है।

संबंधित मुद्दे