Animating a div while it fits to dynamically loaded content

Question

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.

HTML:

<div id="menu-content">
<div id="info"></div>
</div>  

CSS of the two divs:

#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;
}

.JS 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)
        });

Am very new to jQuery so please go easy on me.. Thanks.

Answer 1

Here's how I'd do it. (And here's an example)

HTML: The same.

CSS:

#menu-content {
    /* same */
}

#info {
    position:relative;
    color: #F4F4F4;
    float:left;
    opacity:0;
    width:0; height:0; padding:0;
}​

Set #info opacity, width, height, and padding to 0 initially.

JS:

    var $mci = $('#info'); // cache #info

    $mci.load('company.html'); // load content

    // Set width, height, and padding to their final state
    $mci.css({'width':'auto','height':'auto', 'padding':'15px 25px'});
    // Capture width and height
    var contentWidth = $mci.width();   
    var contentHeight = $mci.height();
    // Reset to 0
    $mci.css({'width':'1px','height':'0','padding':'0'}); // width 0 doesn't work

    $('#menu-content').css('opacity','1'); // show container
    // animate growth
    $mci.animate({
        'opacity':1,
        'width':contentWidth+'px', // width() returns int, so add 'px'
        'height':contentHeight+'px', // height() returns int, so add 'px'
        'padding':'15px 25px'}, 500);

});
​

Hope that all makes sense (and works for you).