Javascript 隐藏元素时，如何设置div背景的动画？

对于我正在制作的网站，我有一些动态加载的内容。我试图实现的是，当内容加载时，我希望

div

能够平滑地进行动画处理，以扩展到新内容的大小，就像div在中所做的那样：

.box{
宽度：200px；高度：100px；
背景大小：100%200%；
背景图像：线性梯度（至底部，rgba（0,0,0,0）51%，黑色49%）；
-webkit转换：背景位置1s；
-moz转换：背景位置1s；
过渡：背景位置1s；
}
.box:悬停{
背景位置：0-100%；
}

---

您需要获得容器的原始高度以及更新内容后的新高度

function changeContent() {
    var oldHeight = div.height();
    texts.push(div.text());
    div.text(texts.shift());
    var newHeight = div.height();
    div.height(oldHeight);
    div.animate({height: newHeight}, 'fast', function() {
        div.height('auto');
    });
}

---

你能为你的代码/示例编一个提琴或一个片段吗？你有什么可以让farmay这样的东西可以帮助你@JuanC。这正是我的想法！谢谢大家!@胡安克。为什么不把它写下来作为一个答案呢？注意，你也可以使用CSS动画来实现这一点：