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.

mVChr · Answer 1 · 2010-06-03T21:05:51.700

2

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

edited Jun 03 '10 at 21:05

answered Jun 03 '10 at 20:57

mVChr

49,587
11
107
104

This is cool. Its sliding superbly. But everytime I click a button, i want it to slide from the current height & width to the new height & width without going to the 0, 0 mark in between. Also it takes the old h&w values when a new content is loaded. For eg. if content 2 is loaded, the background takes the shape according to content 1, if content 3, then content 2 and so on.. Hope I am explaining it properly. Any solutions for this? Thank you so much for your help. – JDee Jun 04 '10 at 07:08
Yeah. Before setting the dimensions to auto, store them in vars lastWidth and lastHeight. Then on the reset line use these values instead of the 1px and 0. Don't forget to add the 'px' to them since you'll be storing ints. – mVChr Jun 04 '10 at 10:59
I tried to do that but seems like I cant get the width right. The height gets manipulated good and the width, too, has no problem in shrinking but it just doesnt expand. – JDee Jun 05 '10 at 03:20

Animating a div while it fits to dynamically loaded content

1 Answers1

Linked