在不知道最终大小的情况下使用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'
});