यह प्रश्न थोड़ा पुराना हो रहा है, लेकिन यहां किसी मूलभूत jQuery का उपयोग करके इसे हल किया गया है, अगर किसी और को एक साधारण समाधान की आवश्यकता है।
मेरे मामले में, मेरे पास ब्लॉग पोस्ट की एक सूची है जो पहले max-height के साथ पृष्ठ पर प्रस्तुत की जाती है जो केवल पाठ की पहली 4 पंक्तियां दिखाती है, शेष overflow: hidden है। मेरे पास एक विस्तार/पतन बटन है जो आलेख को अपने संक्षिप्त रूप से विस्तारित (पूरी तरह से प्रदर्शित) और फिर से वापस करने के लिए टॉगल करता है।
पहले मैंने अधिकतम ऊंचाई संपत्ति को एनिमेट करने की कोशिश की और जैसा कि आपने ऊपर खोजा है, यह काम नहीं करेगा। मैंने सीएसएस संक्रमण के साथ एक ही निराशाजनक परिणाम के साथ यह भी कोशिश की।
मैंने इसे '1000em' जैसी बहुत बड़ी संख्या में सेट करने का भी प्रयास किया, लेकिन इसने एनिमेशन को गूंगा दिखने के रूप में देखा क्योंकि यह सचमुच इस तरह के बड़े मूल्य (जैसा कि आप उम्मीद करेंगे) में इंटरपोल कर रहे थे।
मेरे समाधान scrollHeight, जो एक बार पेज लोड किया जाता है इस प्रकार प्रत्येक कहानी के प्राकृतिक ऊंचाई निर्धारित करने के लिए प्रयोग किया जाता है का उपयोग करता है:
$(function(){ // DOM LOADED
// For each story, determine its natural height and store it as data.
// This is encapsulated into a self-executing function to isolate the
// variables from other things in my script.
(function(){
// First I grab the collapsed height that was set in the css for later use
var collapsedHeight = $('article .story').css('maxHeight');
// Now for each story, grab the scrollHeight property and store it as data 'natural'
$('article .story').each(function(){
var $this = $(this);
$this.data('natural', $this[0].scrollHeight);
});
// Now, set-up the handler for the toggle buttons
$('.expand').bind('click', function(){
var $story = $(this).parent().siblings('.story').eq(0),
duration = 250; // animation duration
// I use a class 'expanded' as a flag to know what state it is in,
// and to make style changes, as required.
if ($story.hasClass('expanded')) {
// If it is already expanded, then collapse it using the css figure as
// collected above and remove the expanded class
$story.animate({'maxHeight': collapsedHeight}, duration);
$story.removeClass('expanded');
}
else {
// If it is not expanded now, then animate the max-height to the natural
// height as stored in data, then add the 'expanded' class
$story.animate({'maxHeight': $story.data('natural')}, duration);
$story.addClass('expanded');
}
});
})(); // end anonymous, self-executing function
});
छवियों के साथ भी ऐसा ही करने के लिए, मैं सिर्फ एक बाहरी में उन्हें लपेट होगा div जो आप max-height और overflow:hidden पर सेट करेंगे, जैसे मैंने ऊपर div.story का उपयोग किया था।
किसी ने तब से यही समस्या हल की है और हल किया है http://stackoverflow.com/questions/4901643/animate-max-width-on-img-jquery – Craig