एक निश्चित ऊंचाई तक JQuery के साथ स्लाइड अप/डाउन - क्या यह संभव है?

Question

क्या एक div up (इसे बंद करना) स्लाइड करना संभव है लेकिन पूरी तरह से नहीं?

मेरा मतलब है, स्लाइड करें लेकिन उस div को प्रदर्शित करने के लिए थोड़ा छोड़ दें, क्या यह संभव है?

अग्रिम धन्यवाद, मेम

Answer 1

इस तरह कुछ काम कर सकते हैं:

$("#div").toggle(
function(){ 
    $("#div").animate({ height:"500px" }, { queue:false, duration:500 }); 
}, 
function(){ 
    $("#div").animate({ height:"50px" }, { queue:false, duration:500 }); 
}); 

500px के बजाय

यह सिर्फ div के मूल आकार हो सकता है, और 30px आप फिर भी कुछ हो सकता है जब यह छुपाया जाना है तो दिखाना चाहते हैं।

Answer 2

अपनी मूल ऊंचाई पर div खोलने का बेहतर तरीका स्लाइडडाउन() का उपयोग कर रहा है। समस्या यह है कि इस फ़ंक्शन को इसे खोलने से पहले div को छिपाने की आवश्यकता होती है। निम्नलिखित तरीके से एक छोटा सा बदसूरत है लेकिन अच्छी तरह से काम करता है:

$("#test").toggle(
function(){ 
    $("#test").css('height', 'auto').hide().slideDown('fast'); 
}, 
function(){ 
    $("#test").animate({ height:'50px' }, { queue:false, duration:500 }); 
}); 

Answer 3

मैं jQuery के animate पद्धति का उपयोग करके यह कभी कभी कुछ ब्राउज़रों में गाड़ी है, क्योंकि सलाह नहीं देते। सीएसएस संक्रमण के साथ स्लाइड को एनिमेट करें एक बेहतर विकल्प (मेरे अनुसार), div ऊंचाई या अधिकतम ऊंचाई सेट करके।

सीएसएस:

.expandable { 
    max-height: 3em; 
    overflow: hidden; 
    transition: max-height .3s; 
} 

क्लिक पर

, jQuery के साथ सेट अधिकतम ऊंचाई:

$(.someSelector).css('max-height', expandedHeight); 

तब स्टाइल को दूर जब यह फिर से क्लिक किया:

$(.someSelector).attr('style', ''); 

आप देख सकते हैं this demo example