Jquery चेतन

Question

मैं खोज परिणामों में खींच और उन्हें एक div में प्रदर्शित करने के लिए एक सरल ajax लोड कर रहा हूँ ajax लोड पर div ऊंचाई में परिवर्तन:

$('#myDiv').load('update.php?id=123', function() { 
    //callback here 
}); 

यह सब काम कर ठीक और div अद्यतन अपेक्षा के अनुरूप है । 'myDiv' या तो लौटाए गए परिणामों की संख्या के आधार पर घटता या बढ़ता है।

मैं वृद्धि/संकीर्ण कैसे एनिमेट कर सकता हूं?

मुझे पता है कि मैं या तो स्लाइडअप/स्लाइडडाउन या शो/छुपा सकता हूं उदा।

$('#myDiv').slideUp('fast').load('update.php?id=123', function() { 
    $('#myDiv').slideDown('fast'); 
}); 

हालांकि, मैं हटना या यह पहली बार छुपाना चाहते हैं न - मैं ऊंचाई ajax लोड के बाद मूल्य के लिए ajax लोड से पहले अपने मूल्य से जाना चाहते हैं।

क्या यह संभव है?

Answer 1

सबसे पहले आपको ऑटो-आकार बदलने की आवश्यकता है।

var $mydiv = $('#myDiv'); 
$mydiv.css('height', $mydiv.height()); 

तो एक बार लोड पूरा करता है हम एक div में सामग्री लपेट और इसका इस्तेमाल ऊंचाई पुनर्गणना के लिए।

$mydiv.load('update.php?id=123', function() { 
    $(this).wrapInner('<div/>'); 
    var newheight = $('div:first',this).height(); 
    $(this).animate({height: newheight}); 
}); 

Demo

Answer 2

#myDivशैली = "स्थिति: सापेक्ष;"। फिर से कॉलबैक में .load(), एक छिपा बनाएं, इसे #myDiv की चौड़ाई दें और इसमें परिणाम लोड करें। छिपी हुई div की ऊंचाई पढ़ें, और #myDiv के लिए उस ऊंचाई पर एक एनीमेशन करें। छुपा div हटाएं।

Answer 3

आपको jQuery.animate की आवश्यकता है। इसके साथ, आप किसी भी संपत्ति को किसी भी मूल्य पर एनिमेट कर सकते हैं। आपके मामले में, आप height को अपने पिछले मान से नए मान पर एनिमेट करेंगे।

नोट, हालांकि, सामग्री को बदलने से पहले आपको पुराने मान को रिकॉर्ड करने की आवश्यकता है, क्योंकि इसकी ऊंचाई (यदि पूर्ण नहीं है) सामग्री अद्यतन होने पर अपडेट की जाएगी। शायद यह एक रैपिंग कंटेनर का आकार बदलने के लिए फायदेमंद हो सकता है।

तो जैसा

:

<div class="wrapper"> 
    <div>Content is here</div> 
</div> 

आप .wrapper के लिए hidden को overflow का मान सेट करते हैं, तब प्रभाव आप के बाद कर रहे हैं प्राप्त करने के लिए आंतरिक div की ऊंचाई मैच के लिए यह आकार बदल सकते हैं।