在不知道最終大小的情況下使用jQuery動畫DIV大小

Question

我有一個DIV，內容是使用jQuery動態插入的。我希望該div看起來好像是從0px的大小擴大到當div使用其內容呈現時它應該採用的大小。

內容是文本，所以我沒有關於將它附加到文檔時所需的大小的信息。我知道如何使用jQuery Animate對div進行動畫處理，當我知道最終的大小時，但是當我不知道它的時候不知道該怎麼做。

例如，如果我使用width: "+=10"例如，我得到一個大於我沒有動畫的動畫的div。謝謝。

Answer 1

插入您的項目，保存寬度和高度，然後將項目的寬度和高度設置爲零。這將發生得太快而無法看到，並且您將獲得動畫所需的最終寬度和高度值。

Live Demo

var $div = $('<div>', { 
    text: <your text> 
}); 

// <append your element> 

var width = $div.width(); 
var height = $div.height(); 

$div.css({ 
    width: 0, 
    height: 0 
}); 

$div.animate({ 
    width: width, 
    height: height 
}, { 
    duration: 'slow', 
    easing: 'linear' 
});