Measure a height of a div using .load

I'm using .load to load in an external document. I want the loaded content to animate in, however I don't know how to measure the height of the loaded content.

The div I want to measure in the external document is #box_project2.

The site is live at http://richardhedberg.com/portfolionew/index.html with the height i want to define set to 300px;

$('.thumbs2').click(function() {

var idStr = ("project/"+$(this).attr('id'));

    $('#show2').animate({opacity:0},function(){

    $('#close2').fadeIn(500).css({'display': 'block', 'height': '25px'});

    $('#show2').load(idStr,function(){
                $(this).animate({height:'**I WANT TO DEFINE THIS**', opacity:1}, 500, function(){
                });
$.scrollTo('#gohere',300);

    });

});
    });

$('#close2').click(function(){

    $('#close2').fadeOut(300).animate({});
    $('#show2').animate({height开发者_开发问答: '0px', opacity:0},500, function(){
    $('#show2').children().remove();    
    });
});








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

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







#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 {
display:block;
background:#fff;
text-align: left;
clear:both;
height:100%;
}

NEW CODE

$('.thumbs2').click(function() {

var idStr = ("project/"+$(this).attr('id')) + " #box_project2";

    $('#close2').fadeIn(500).css({'display': 'block', 'height': '25px'});



     $('#show2').load(idStr,function(){
                $(this).slideDown('slow', function() {
                });
                                       $.scrollTo('#gohere',300);


    });

});

If you want to animate from 0 to the height of the element you can use slideDown() http://api.jquery.com/slideDown/

$('#show2').slideUp().fadeOut();

$('#show2').load(idStr, function() {
   $(this).fadeIn().slideDown();
});

idstr.outerHeight(true);

This will return the height of the object you are bringing in, and the true will include margins in the height calculation.

Other than that you may just want to use:

.slideDown();

As suggested which calculates the height and slides for you.

p.s Atmosphere are awesome