Animate the height of a document jQuery
<p>I'm trying to load a html document inside an expanding div and I want the to animate the expand.
As it is now i can only set a height and it animates that then just show the rest.</p>

<p>So i guess i want it to load the content and then animate it in, basically where it says 300px it should be the height of my html document (which is different since it's different project in my portfolio).</p>

<p>The box_project2 HTML is in the separate html document and should define the animated height.</p>

<p>Link to my site where you can see the acual problem by clicking on some of the top projects.
<a href="http://richardhedberg.com/portfolionew/index.html#" rel="nofollow">http://richardhedberg.com/portfolionew/index.html#</a></p>

<pre><code>$('.thumbs2').click(function () {
    var idStr = ("project/" + $(this).attr('id'));
    var newHeight = 0;
    $('#show2').animate({ height: '300px', opacity: 0 }, function () {
        $('#workp').fadeIn('fast');
        $.scrollTo('#gohere', 300);

        $('#show2').load(idStr, function () {
            newHeight = $('#box_project2').outerHeight();
            $(this).animate({ height: newHeight }, 300, function () {
                $('#show2').delay(200).animate({ opacity: 1 }, 800);
                $('#close2').css({ 'display': 'block', 'height': '25px' });
            });
        });
    });
});




       &lt;div id="close2"&gt;
       &lt;/div&gt;  
       &lt;div id="show2"&gt;
            &lt;div id="box_project2"&gt;
            &lt;/div&gt;
       &lt;/div&gt;


.workp {
background:#fff;
position:relative;
z-index:999;
margin-bottom:30px;


}


#close2 {
position:absolute;
width:25px;
height:24px;
background:url(images/graphics/CloseIcon.png);
right:0px;
top:0px;
z-index: 9999;
display: none;
margin-left:-30px;



}
#show2 {
display: block;
height: 0px;
opacity: 1;
margin-left:-30px;
clear:both;

}

#box_project2 {

background:#fff;
text-align: left;
clear:both;
height:100%;


}
</code></pre>
