JQuery/CSS3: Animating auto height change

Question

I need to animate the height of a parent container whenever it changes. The problem is its height is set to auto, and thus the height depends on the content. The end goal I want to achieve is that whenever the height changes due to the content being changed, the change can be animated, either through jQuery or CSS3.

I have searched similar topic but all I found is how to animate the height from a fixed value to "auto" :(

Answer 1

You can get the effect you are after with just CSS. instead of animating the height of the div, animate the max-height property. set the max-height on the hover to what you think would be the max-height (be over considerate). the reason for that is, if you set the max-height to 10000px and the height of the div is 1000px and you set the duration of the animation to 1 second it will have cleared the content height after 0.1s and the it will appear asthough the transition is over, as max-height values over 1000px would have no effect. So, a more accurate max-height is better for more consistent animations.

http://jsfiddle.net/2QcCC/2/

.container {
    height: auto;
    min-height: 100px;
    max-height: 100px;
    transition: 1s max-height;
    overflow: hidden;
}
.container:hover {
    max-height: 4000px;   
}

Answer 2

One way to do this is to animate the content height. The parent's height will then follow automatically. Whether this will work for you depends on how the content height is changing but if the content is a fixed height then it should be possible with the following CSS:

.container {
    width: 500px;
    height: auto;
    border: 2px solid blue;
}

.container .content {
    with: 100%;
    height: 200px;
    transition: 1s height;
}

When you change the height of .content with javascript, the height of .container will also be animated.

You can see this in action here: http://jsfiddle.net/MBD6z/

I'm not sure if this will work in your case... I'd need more details on how the content is changing but this is one way of doing it.