How to Animate a Div's Height to 'auto' with jQuery?

Animating Elements to Auto Height with jQuery

You want to animate a div to automatically adjust its height based on its content. While the basic code is simple, it might not work as expected. We'll delve into the solution and provide a step-by-step explanation below.

Code Snippet

$("div:first").click(function(){
  $("#first").animate({
    height: "auto"
  }, 1000 );
});

Solution

The provided code attempts to animate the div's height to 'auto,' allowing it to expand based on its content. However, it doesn't work because the div's initial height is set to 200px. When the 'auto' height is animated from 200px, there's no visible change.

Steps

To achieve the desired effect, we need to first save the current height (200px) and temporarily set the height to 'auto' to calculate the actual auto height. Here's how to do it:

1. Save Current Height:

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

2. Set Height to Auto (Temporary):

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

3. Get Auto Height:

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

4. Revert to Current Height and Animate:

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

Combined Code:

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's Height to 'auto' with jQuery?. For more information, please follow other related articles on the PHP Chinese website!