Load content into div, and resize the div using jQuery

Question

Possible Duplicate:
jQuery Animation - Smooth Size Transition

I have a div #infoMenu, whose content is being replaced with the following code:

function infoMenu(worldID) {
    $('#infoMenu').load('main.php?worldID='+worldID+'&menu #infoMenu').html('Loading...');              
}

I wonder if I can animate the div's height instead of it just "jumping" into diffrent heights depending on the new content´s space.

Thanks!

Answer 1

Try adding a callback function:

function infoMenu(worldID) {
    $('#infoMenu')
        .load('main.php?worldID='+worldID+'&menu #infoMenu', function(data){
          $('#infoMenu').animate({ height: '500px' }, 1000);
        })
        .html('Loading...');              
}

But make sure the css has a set height and overflow: hidden;

---

Edit: Better yet, set the overflow:scroll then animate to the scrollHeight:

$('#infoMenu').animate({ height: $('#infoMenu')[0].scrollHeight }, 1000);