Question

我有两个Div。 'contents'（外部）和'info'（内部）。 'info'将动态加载4-5个外部html文件中的数据。 'contents'只包含一个黑色背景。现在我已经设法加载了html但我希望平滑的背景动画（'内容'）根据内容环绕内部div。我当前的代码包装它但我希望背景转换发生得很慢。

HTML：

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

两个div的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;
}

.JS代码：

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

我对jQuery很新，所以请放轻松我...谢谢。

Answer 1

我是这样做的。（And here's an example）

HTML：相同。

<强> CSS：

#menu-content {
    /* same */
}

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

最初将#info不透明度，宽度，高度和填充设置为0。

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

});

希望一切都有意义（并且适合你）。

动画div适合动态加载的内容

1 个答案: