Animated height adjustment when changing innerHTML

Question

I had this idea ... let's say I have a DIV that contains some text.

<div id="myDIV">Testing testing lorem ipsum</div> 

If I change the contents of this DIV by doing something like

 $("div#myDIV").html("New text New text New text New text New text New " + "text New text New text New text New text New text New text New text " + "New text New text New text New text") 

div height will change.

Is it possible to revive this sudden change in height to smooth the transition?

Answer 1

This is ugly, but it may be a solution. The idea is to wrap your content div with another div that acts like a mask. Thus, the internal height of the div can be calculated after updating it, and the animation can be applied to the mask:

 // Get current height of container div. var containerHeight = $('#container').outerHeight(); // Manually set height of container div. $('#container').css({height: containerHeight}); // Update the html of the content div. $('#container div').html('New text New text New text New text New text New ' + 'text New text New text New text New text New text New text New text ' + 'New text New text New text New text'); // Get the height of the content div. var contentHeight = $('#container div').outerHeight(); // Animate the height of the container div to the content height. $('#container').animate({height:contentHeight}, 1000);