Question

There is a container div (#content) with 10px padding and its content (#inner_content). I’m loading some new stuff via ajax (the new html contains everything in a #inner_content div) and replace #content's html with the new html.

While doing this I want the height of the container div (#content) to adjust to the height of the new content by animation. So I have set overflow: hidden for the container div and when I load new content, I get its height and animate the container div to the same height. All is good expect that sometimes the height is somewhat bigger (10-20 pixels maybe) than needed and that’s causing trouble to the design.

So I put a complete function on the .animate() to set the height of the container div to ” (auto) after the animation has completed so that the height is correct. The problem is that the complete function runs immediately, the animation is skipped and the height becomes auto instantly. Here’s the code:

$("#content").html(response); 
$("#content").animate({height: $("#inner_content").height()+"px"}, 300, function () {
$("#content").css({height: ''});
});

How can I solve this problem? I need the animation to be executed then the height set to auto (this causes a small ‘gap’ in the proccess because the div immediately gets 10-20px shorter but it’s ok.

Answer 1

Hmm, without any source code it’s tricky, but my gut instinct is saying, for some reason, your #content and #inner_content divs are actually the same height (I’m guessing 0), which is causing the animation to execute instantly, thus firing the event immediately as well.

Are you able to provide any source?

I would recommend first playing with the outerHeight() method on the divisions and see what happens. Additionally, try turning off the overflow: hidden and instead try the following pseudo-code:

1. Load the new content in a hidden separate div
2. Get the height of the new content
3. Animate the current content
4. Update the current content with the new content