Animate the height of a document jQuery

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 anima开发者_JAVA百科tes that then just show the rest.

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).

The box_project2 HTML is in the separate html document and should define the animated height.

Link to my site where you can see the acual problem by clicking on some of the top projects. http://richardhedberg.com/portfolionew/index.html#

$('.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' });
            });
        });
    });
});




       <div id="close2">
       </div>  
       <div id="show2">
            <div id="box_project2">
            </div>
       </div>


.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%;


}

---

And what's your question?

First you want to do the load and then the animation on load's callback?

But if you want to show to the user how much of the data has been loaded, then first you need to write your own animation class. Then on every frame you load the data and the on the callback you go to next frame. Note that you dynamically change url's in that case, because you don't have control over data flowing from one ajax call.

---

This

 $(this).animate({ height: newHeight }

should probably have the px unit appended and be

 $(this).animate({ height: newHeight + 'px' }