How can I animate the background of a div when an element is hidden?

Question

For a website I'm making, I have some content that dynamically loads. What I'm trying to accomplish is that when the content loads, I would like the div to smoothly animate to expand to the size of the new content, sort of like the div does in this Fiddle or 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> 

That code uses a CSS transition as a hacky way to accomplish a slide.

transition: background-position 1s;

Instead, I would like to use JavaScript, maybe with JQuery, to get the div itself to resize to fit my content. For example, if the old content was longer than the new content, the div would slide to become smaller. If the old content was smaller, then the div would grow to fit the new content.

Currently, the div just jumps to be smaller, since the elements inside no longer need as much space. Is there any way to animate this content change? I have tried using CSS transitions but it was too complicated to coordinate the sizes of the div and content.

Answer 1

you need to get the original height of your container and the new height after its content has been updated

Demo

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