適合動態加載內容的動畫製作一個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

回答

相關問題