Jquery - ऊंचाई तक एनिमेट करें: ऑटो

Question

एनिमेट करना संभव है -> सीएसएस ('ऊंचाई', 'ऑटो')?

काम कर उदाहरण http://www.jsfiddle.net/V9Euk/154/

सीएसएस

#div1 { 
    position:absolute; 
    right:30px; 
    bottom:0px; 
    border:1px solid #ff0000; 
    overflow:hidden; 
} 

एचटीएमएल

<div id="div1" style="height:20px;"> 
     Test<hr /> 
     text text <br /> 
     text text <br /> 
     text text <br />    
    </div> 

jQuery

$("#div1").hover(

function() { 

    $('#div1').animate({ 
     "height": "auto" 
    }, "fast");     // <---- dont work :(

}, function() { 

    $('#div1').animate({ 
     "height": "20px" 
    }, "fast"); 
}); 

अग्रिम धन्यवाद! अगर यह मदद करता है पीटर

Answer 1

प्रयास करें:

$('#div1').removeClass("someClassWithYourHeight", "fast"); 

height, auto डिफ़ॉल्ट प्रति होना चाहिए, इसलिए यदि आप सिर्फ height को दूर यह एक ही होना चाहिए। यूआई प्रभावों से आपको removeClass की आवश्यकता है: http://docs.jquery.com/UI/Effects/removeClass

बस इसका परीक्षण किया - यह काम करता है।

Answer 2

यह मुझे क्या करना है:

//Get Current Height 
var currentHeight = $("#mybox").css("height"); 

//Set height to auto 
$("#mybox").css("height","auto"); 

//Store auto height 
var animateHeight = $("#mybox").css("height"); 

//Put height back 
$("#mybox").css("height", currentHeight); 

//Do animation with animateHeight 
$("#mybox").animate({ 
    height: animateHeight 
    }, 500); 

Answer 3

यह थोड़ा मुश्किल है, लेकिन यह काम करता है।

var height = parseInt($("#test").slideDown(0).css("height")); 
$("#test").css("height", "0px"); // or any other initial state you want   
$("#test").stop(true, true).animate({ height: height + "px"}, 1000); 

Answer 4

यहां ऐसा करने का एक गतिशील तरीका है- ऊंचाइयों को जानने के बिना किसी भी नौसेना पर काम करता है।

var heights = new Array(); 
$('ul.nav > li').each(function(i) { 
    heights[i] = $(this).find('ul').height(); 
    $(this).find('ul').height(0); 
}); 
$('ul.nav > li').hover(function() { 
    var i = $(this).index(); 
    $(this).children('ul').stop().animate({height: heights[i]},200); 
},function() { 
    $(this).children('ul').stop().animate({height: '0'},200); 
}); 

Answer 5

मेरी राय में आप .scrollHeight का उपयोग करना चाहिए, क्योंकि अगर वहाँ एक br एक लाइन (क्योंकि लेख बहुत बड़ा हो जाएगा यह दो पंक्तियों में टूट जाएगा) की तुलना में अधिक में होगा।

अंत में यह इस तरह होना चाहिए:

http://jsfiddle.net/V9Euk/945/

हटाने शैली जांच ऊंचाई की तुलना में जोड़ें। तो अपने कोड होना चाहिए:

$(document).ready(
function rt() { 
    $("#div1").hover(

    function() { 

     $('#div1').animate({ 
      "height": heightOfDiv 
     }, "fast");     

    }, function() { 

     $('#div1').animate({ 
      "height": "20px" 
     }, "fast"); 
    }); 
    heightOfDiv=$("#div1")[0].scrollHeight; 
    $('#div1').css({'height':'20px'}); 
}); 

चेतन इससे पहले कि आप .stop इस्तेमाल कर सकते हैं(), लेकिन यह आप पर निर्भर करता है (न करने के लिए बहुत लंबा मँडरा के बाद गैर stoping एनीमेशन है)

Answer 6

मेरे समाधान inorganik के लिए समान है इसमें यह किसी दिए गए वर्ग के साथ किसी भी तत्व के लिए काम करता है, सिवाय इसके कि मैं एक सरणी के बजाय प्रत्येक तत्व की ऊंचाई विशेषता के भीतर ऑटो ऊंचाइयों को संग्रहीत करता हूं। यह $ (इस) .attr ('ऊंचाई') के रूप में आसानी से सुलभ किसी भी तत्व की ऑटो ऊंचाई बनाता है।

पृष्ठ लोड पर, ऑटो ऊंचाइयों की दुकान और फिर इच्छित ऊंचाई तक तत्वों सेट:।, बजाय $ के ('। तत्व')

$(function() { 
    $('.element').each(function() { 
    $(this).attr('height', $(this).height() + ''); 
    }) 
    $('.element').css('height', '20px'); 
}); 

फिर चेतन ({ऊंचाई: 'ऑटो'}), तो आप इस कह सकते हैं:

$('.element').animate({height : $(this).attr('height')}) 

Answer 7

आप इस कोशिश कर सकते हैं, जाहिरा तौर पर यह बहुत अच्छी तरह से काम करता है।

$('#div1').animate({ 'height': $('#div1')[0].scrollHeight }, "fast") 
      .promise().done(function() { 
      $('#div1').height('auto'); 
      }); 

संपादित नमूना: http://jsfiddle.net/bafsar/Lo04vspb/