Measure a height of a div using .load
<p>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.</p>

<p>The div I want to measure in the external document is #box_project2.</p>

<p>The site is live at <a href="http://richardhedberg.com/portfolionew/index.html" rel="nofollow">http://richardhedberg.com/portfolionew/index.html</a> with the height i want to define set to 300px;</p>

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








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

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







#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%;
}
</code></pre>

<p>NEW CODE </p>

<pre><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);


    });

});
</code></pre>
