Jquery 在div适合动态加载的内容时设置其动画

我有两个div“内容”（外部）和“信息”（内部）。”info“将从4-5个外部html文件动态加载数据。”“内容”只包含一个黑色背景。现在我已经成功加载了html，但我希望背景（“内容”）的平滑动画根据内容环绕内部div。我当前的代码对其进行了包装，但我希望背景转换缓慢进行

HTML:

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

.JS代码：

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

$('#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)
});

#menu-content {
    /* same */
}

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

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

});
​

我对jQuery很陌生，所以请对我宽容一点。。谢谢

我会这样做的。（）

HTML:相同

CSS:

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

$('#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)
});

#menu-content {
    /* same */
}

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

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

});
​

最初将不透明度、宽度、高度和填充设置为0

JS:

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

$('#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)
});

#menu-content {
    /* same */
}

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

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

});
​

---

希望这一切都有意义（并且对你有用）。

这很酷。它滑得非常好。但是每次我点击一个按钮，我都希望它从当前的高度和宽度滑动到新的高度和宽度，而不去中间的0，0标记。此外，当加载新内容时，它会采用旧的h&w值。例如，如果加载了内容2，背景将按照内容1、内容3、内容2的形状呈现，依此类推。。希望我能解释清楚。有什么解决办法吗？非常感谢你的帮助。将尺寸设置为“自动”之前，请将其存储在vars LASTWITH和lastHeight中。然后在重置行上使用这些值，而不是1px和0。别忘了给它们加上“px”，因为你要存储整数。我试过这么做，但似乎我不能得到正确的宽度。高度得到了很好的控制，宽度也没有缩小的问题，只是没有扩大。