Animate <div> to unknown height

Question

Situation: I have an index page which loads pages into it with ajax as such:

$("#ajax2").load("contact.php");

I do so with all my pages, but it changes the size real choppy and I want to animate this.

Important stuff from my index page:

<ul id="nav">
    <li id="current"><a href="#" id="home" onclick="pages('home');">Home</a></li>
    <li><a href="#" id="contact" onclick="pages('contact');">Contact</a></li>
</ul>

My javascript function:

var pages = function(id) {
switch(id) {
    case 'home':
        $("#ajax2").load("home.php");
        break;
    case 'contact':
        $("#ajax2").load("contact.php");
        break;
}
};

Does anyone can point me in the direction on what I need to do so my div "ajax2" changes the size real smooth?

I would have used

$("#ajax2").animate({ height: '60px' }, 'easeInOutCubic', function(){
});

except I don't know the height of the contact/home/any page.

Solved

Answer 1

$("#ajax2")
  .css({
    display:'none'
  })
  .load('home.php', function () {
    var height;
    height = $(this).height();
    $(this)
      .css({
        height :0,
        display:'block'
      })
      .animate({
        height:height
      }, 1000, 'linear', function () {
      });
  });