How to Animate a Div Element to Auto Height Using jQuery?

1. Save the current height: Determine the height of the
   prior to resizing.

var curHeight = $('#first').height();

2. Transition to auto height: Overwrite the height property with 'auto' for a moment.

$('#first').css('height', 'auto');

3. Obtain the auto height: Fetch the natural height of the
   with auto height.

var autoHeight = $('#first').height();

4. Revert and animate: Restore the initial height and initiate the animation to the auto height.

$('#first').height(curHeight).animate({height: autoHeight}, 1000);

5. Concatenate the code: Combine all the steps for a simple solution.

var el = $('#first'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 1000);

The above is the detailed content of How to Animate a Div Element to Auto Height Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!