隱藏元素時如何為div的背景設置動畫？

Question

對於我正在制作的網站，我有一些可以動態加載的內容。 我要完成的工作是，當內容加載時，我希望div平滑地動畫以擴展到新內容的大小，就像div在此Fiddle或this中所做的那樣：

 .box { width: 200px; height: 100px; background-size: 100% 200%; background-image: linear-gradient(to bottom, rgba(0,0,0,0) 51%, black 49%); -webkit-transition: background-position 1s; -moz-transition: background-position 1s; transition: background-position 1s; } .box:hover { background-position: 0 -100%; } 

 <div class="box"></div> 

該代碼使用CSS過渡作為完成幻燈片的一種怪異方式。

transition: background-position 1s;

相反，我想使用JavaScript（也許與JQuery一起使用）來使div本身調整大小以適合我的內容。 例如，如果舊內容比新內容長，則div會變小。 如果舊內容較小，則div會增長以適應新內容。

當前， div只是跳到較小的位置，因為里面的元素不再需要那么多的空間。 有什么方法可以使此內容更改動起來嗎？ 我嘗試使用CSS過渡，但是它太復雜了，無法協調div和內容的大小。

Answer 1

您需要獲取容器的原始高度和內容更新后的新高度

演示

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