Animate div height changes when its content changes

Question

I have a div#menu that displays a list of information. This information changes through ajax. When it changes, I want to animate this transition from height A to height B.

I know I can use .animate({'height': 'something') , but I don't know how to glue it all together.

I am using jQuery.

How can i do this?

Change

The ajax call is as follows:

 $.ajax({ url: $(this).data('redraw-event-url'), dataType: 'script' }) 

Answer 1

You can add new HTML to the DOM screen so that the user cannot see it. Then get the height and change the height of the container just before moving the new HTML from temporary off-screen to the final destination. Something like that:

 $.ajax({ success : function (serverResponse) { //add the new HTML to the DOM off-screen, then get the height of the new element var $newHTML = $('<div style="position : absolute; left : -9999px;">' + serverResponse + '</div>').appendTo('body'), theHeight = $newHTML.height(); //now animate the height change for the container element, and when that done change the HTML to the new serverResponse HTML $('#menu').animate({ height : theHeight }, 500, function () { //notice the `style` attribute of the new HTML is being reset so it not displayed off-screen anymore $(this).html($newHTML.attr('style', '')); }); } }); 

Answer 2

You need to do this in a couple of steps:

• First, add new data to another div, ideally hidden or not even contained in dom.
• Secondly, find out how tall this second div is
• Set the height of the first div using animation, and as soon as the animation ends, replace the contents

so some code:

 // put the content into a hidden div $('#hiddendiv').html(content); // get the target height var newHeight = $('#hiddendiv').height(); // animate height and set content $('#menu').animate({'height': newHeight}, function(){ $('#menu').html($('#hiddendiv').html()); }); 

Answer 3

I believe I have a cleaner, better solution with a container:

 <div id="menu_container"> <div id="menu"> <p>my content</p> </div> </div> 

What I am doing is that I lock the maxHeight and minHeight of the container to the current div height. Then I change the contents of this div. And finally, I “let go” of the maximum and minimum height of the container to the current height of the inner div:

 $("#menu_container").css("min-height", $("#menu").height()); $("#menu_container").css("max-height", $("#menu").height()); $("#menu").fadeOut(500, function() { //insert here the response from your ajax call var newHtml = serverResponse; $(this).html(newHtml).fadeIn(500, function() { $("#menu_container").animate({minHeight:($("#menu").height())},500); $("#menu_container").animate({maxHeight:($("#menu").height())},500); }); }); 

Answer 4

A good solution is to render the div#menu object in the success callback

 $.ajax({ url: $(this).data('redraw-event-url'), dataType: 'script', success: function(){ $('div#menu').animate({'height': 'something'); } }) 

hope this helps