How to Animate an Element's Height to 'auto' with jQuery?-CSS Tutorial-php.cn

How to Animate an Element's Height to 'auto' with jQuery?

Mary-Kate Olsen

Release： 2024-12-06 02:36:09

Original

996 people have browsed it

How to Animate an Element's Height to

Animating Elements to Auto Height with jQuery

When working with responsive layouts, it may be necessary to animate an element's height to automatically adjust its size based on content. However, directly animating the height property to "auto" may not produce the desired effect.

Here's an example code that attempts to animate a

from 200px to auto height:

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

Copy after login

Unfortunately, this code will not animate the element's height to auto. Instead, it will simply collapse the element to a height of 0.

To achieve the desired behavior, follow these steps:

Save the current height: Store the current height of the element to restore it after obtaining the auto height.
```
var curHeight = $('#first').height();
```
Copy after login
Temporarily switch the height to auto: Set the element's height to "auto" temporarily to calculate the desired height.
```
$('#first').css('height', 'auto');
```
Copy after login
Get the auto height: Obtain the element's height after setting it to "auto".
```
var autoHeight = $('#first').height();
```
Copy after login
Switch back and animate to auto height: Restore the element's height to its original value, then animate it to the auto height.
```
$('#first').height(curHeight).animate({height: autoHeight}, 1000);
```
Copy after login

Combining these steps, we arrive at the following code that successfully animates the element to auto height:

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

Copy after login

The above is the detailed content of How to Animate an Element's Height to 'auto' with jQuery?. For more information, please follow other related articles on the PHP Chinese website!