Animation d'un div tout en s'adaptant au contenu chargé dynamiquement

Question

J'ai deux divisions. 'contenu' (extérieur) et 'info' (intérieur). 'info' aura des données chargées dynamiquement à partir de 4-5 fichiers html externes. 'contenu' contient juste un fond noir. Maintenant j'ai réussi à charger le html mais je veux une animation fluide de l'arrière-plan ('contents') pour entourer le div interne selon le contenu. Mon code actuel l'enveloppe mais je souhaite que la transition en arrière-plan se fasse lentement.

HTML:

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

CSS des deux 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 très nouveau t o jQuery alors s'il vous plaît allez-y doucement .. Merci.

Answer 1

Voici comment je le ferais. (And here's an example)

HTML: La même chose.

CSS:

#menu-content { 
    /* same */ 
} 

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

Set opacité #info, la largeur, la hauteur et le rembourrage à 0 au départ.

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

}); 
​ 

espoir que prend tout son sens (et fonctionne pour vous).