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

Animating Element to Auto Height with jQuery

When attempting to animate a

element from a specific height to auto height, issues may arise. To address this, consider the following solution:

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!

jquery for auto using Property this transition animation

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn