JQuery .slideDown()

Question

स्लाइडिंग कर रहा है यह काम करता है लेकिन मुझे यकीन नहीं है कि क्यों। function capIn() में, मेरे दिमाग में लाइन $botcap.slideDown("slow") को div नीचे स्लाइड करना चाहिए। यह इसे स्लाइड करता है। यदि मैं .slideUp() का उपयोग करने का प्रयास करता हूं तो ऐसा कुछ नहीं होता है जैसे कि यह इसे स्लाइड करने का प्रयास कर रहा है। क्या कोई मुझे यह समझा सकता है?

$(".slide").hover(capIn, capOut); 

function capIn(){ 
    //slide top caption down 
    var $topcap = $(this).children(".topcap"); 
    $topcap.slideDown("slow"); 

    //slide bottom caption up 
    //!! Why does slideDown slide caption up here? 
    var $botcap = $(this).children(".botcap"); 
    $botcap.slideDown("slow") 
} 

function capOut(){ 
    //slide top back up 
    var $topcap = $(this).children(".topcap"); 
    $topcap.slideUp("slow"); 

    //slide bottom back down 
    var $botcap = $(this).children(".botcap"); 
    $botcap.slideUp("slow"); 
} 

Answer 1

jQuery के slideDown और slideUp कार्यों वास्तव में misnomers हैं। चूंकि slideUp के लिए प्रलेखन यह कहते हैं:

मिलान करने वाले तत्वों को स्लाइडिंग गति से छुपाएं।

छुपा तत्व तत्व की ऊंचाई को संशोधित करके हासिल किया जाता है; आम तौर पर, इसका मतलब है कि तत्व का निचला किनारा स्लाइड करना प्रतीत होता है, इसलिए नाम। हालांकि, यदि तत्व नीचे स्थित है (उदा। position: absolute और bottom: 0 सेट करके), ऊंचाई संशोधन शीर्ष किनारे को स्लाइड करने के लिए दिखाई देगा।

Answer 2

एक संभावित फिक्स $('.botcap') तत्वों को एक कंटेनर के साथ लपेटना होगा और कंटेनर को नीचे संरेखित करना होगा।

Answer 3

एक ही समस्या होने की संभावना है, और इस सवाल को देखा, लेकिन जवाब खुद को मिला। यह तत्व को पूर्ण स्थिति और नीचे के साथ स्थिति की स्थिति के कारण है: 0; यह वास्तव में तत्व का इलाज करेगा जैसे कि यह नीचे आधारित है, इसलिए इसकी स्लाइडडाउन() ऊपर जा रही है। इसे शीर्ष के बजाय शीर्ष (तत्व की ऊंचाई) का उपयोग करके तय किया जा सकता है: 0.