适合动态加载内容的动画制作一个div

我有两个Div。 '内容'（外部）和'信息'（内部）。 'info'将动态加载来自4-5个外部html文件的数据。 '内容'只包含黑色背景。现在我已经设法加载html，但我想要根据内容环绕内部div来平滑背景（'内容'）的动画。我目前的代码包装它，但我希望后台过渡发生缓慢。适合动态加载内容的动画制作一个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) 
});

是很新的T o jQuery，所以请在我身上轻松一点。谢谢。

来源

2010-06-03 JDee

这是我该怎么做的。（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); 

});

希望所有有意义（和你的作品）。

来源

2010-06-03 20:57:17 mVChr

这很酷。它的滑动非常好。但每次我点击一个按钮，我都希望它从当前的高度和宽度滑动到新的高度和宽度，而不需要在中间的0,0标记。当新内容加载时，它也会采用旧的h＆w值。例如。如果内容2被加载，背景将根据内容1的形状，如果内容3，然后内容2等。希望我正确地解释它。任何解决方案？非常感谢你的帮助。 – JDee 2010-06-04 07:08:08

是的。在将尺寸设置为自动之前，将它们存储在变量lastWidth和lastHeight中。然后在重置行上使用这些值而不是1px和0.不要忘记将“px”添加到它们，因为您将存储整数。 – mVChr 2010-06-04 10:59:39

我试图做到这一点，但似乎我不能得到正确的宽度。高度被操纵得很好，宽度也没有缩小的问题，但它没有扩大。 – JDee 2010-06-05 03:20:19

适合动态加载内容的动画制作一个div

回答

相关问题