Animating a div while it fits to dynamically loaded content
<p>I have two Divs. 'contents' (outer) and 'info' (inner). 'info' will have dynamically loaded data from 4-5 external html files. 'contents' just contains just a black background. Now I have managed to load the html but i want smooth animation of the background ('contents') to wrap around the inner div according to content. My current code wraps it but I want the background transition to happen slowly. </p>

<p><strong>HTML:</strong> </p>

<pre><code>&lt;div id="menu-content"&gt;
&lt;div id="info"&gt;&lt;/div&gt;
&lt;/div&gt;  
</code></pre>

<p><strong>CSS of the two divs:</strong></p>

<pre><code>#contents {
    background:rgba(0,0,0,0.2);
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    margin:0px 25px 25px 25px;
    position:relative;
    opacity:0;
    color: #F4F4F4;
    float: left;
}

#info {
    position:relative;
    color: #F4F4F4;
    padding: 15px 25px;
    float:left;
}
</code></pre>

<p><strong>.JS code:</strong></p>

<pre><code>$('#info').css('opacity','0').load('company.html');
        var width = $('#info').css("width") + 50;
        var height = $('#info').css("height") + 30;
        $('#contents').css('opacity','1').animate({
            'width': width, 'height': height
        }, 300, function(){
            $('#info').animate({'opacity':'1'},500)
        });
</code></pre>

<p>Am very new to jQuery so please go easy on me.. Thanks. </p>
