在不知道最終大小的情況下使用jQuery對DIV大小進行動畫處理

Question

我有一個DIV，其內容是使用jQuery動態插入的。 我希望該div看起來好像從大小0px放大到其內容渲染div時假定的大小。

內容是文本，因此我沒有關於將其附加到文檔時將要使用的大小的信息。 我知道最終大小時如何使用jQuery Animate為div設置動畫，但是當我不知道最終大小時不知道如何做。

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

Answer 1

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

現場演示

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