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 · Accepted Answer · 2010-06-03 21:05:51Z

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

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

Collectives™ on Stack Overflow

Animating a div while it fits to dynamically loaded content

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related