Question

I’m doing a simple ajax load to pull in search results and display them in a div:

$('#myDiv').load('update.php?id=123', function() {
   //callback here
});

This is all working fine and the div updates as expected. ‘myDiv’ either shrinks or grows depending on the number of results that are returned.

How can I animate the grow/shrink?

I know I can either slideUp/slideDown or show/hide e.g.

$('#myDiv').slideUp('fast').load('update.php?id=123', function() {
   $('#myDiv').slideDown('fast');
});

However, I dont want to shrink or hide it first – I want the height to go from its value before the ajax load to the value after the ajax load.

Is this possible?

Answer 1

First you need to stop the auto-resize.

var $mydiv = $('#myDiv');
$mydiv.css('height', $mydiv.height() );

then once the load completes we wrap the contents in a div and use it to recalculate the height.

$mydiv.load('update.php?id=123', function() {
   $(this).wrapInner('<div/>');
   var newheight = $('div:first',this).height();
   $(this).animate( {height: newheight} );
});

Demo