jQuery ajax can't animate div height resize in success function

Question

I have a menu in which every item has a content updated via ajax (putted in the "content" div).

    <ul id="menu">
        <li class="gr" on><a href="#">Home</a></li>
        <li class="yel"><a href="#">Products</a></li>
        <li class="bl"><a href="#">Contact</a></li>
    </ul>
    <div class="container">
        <div id="content">
        </div>
    </div>

In the $.ajax success() function, where I put the ajax received data in "content" div, I want to resize div height with animate(). here the steps:

1. get the old "content" height
2. update the "content" div with the ajax received data
3. take the new height
4. animate using the height difference.

So I wrote:

success : function (data) {
  var contHeight = $("#content").height(); //older "content" height
  $('#content').html(data); //update "content"
  var diffHeight = $("#content").height() - contHeight; //difference from new and old height
  $('#content').animate({height: '+=' + diffHeight + 'px'},500);
}

I tried my code (using some alert() functions for debugging) and I noticed that: if I use animate(), contHeight it's equal to the "content" height after the data update(so old height is equal to the new one) and there is no animation. On the other hand, if I remove animate() old and new heights are different. Seems that animate() doesn't permit the update of the "content" height.

Answer 1

Are you sure your content block is float:left; ? Maybe height of #content doesnt change really ... if you have multiple block with float:left; in a parent block with float:none; , parent block havent "the real height", child blocks were showed because overflow is visible ...

<div class="container">
    <div id="content" style="float:left">
        &nbsp;
    </div>
</div>

Answer 2

Try switching your animate function to this:

$('#content').animate({height: $('#content').height() + diffHeight + 'px'},500);