Jquery animate changes in div height on ajax load
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} );});
Give #myDiv a style="position:relative;". Then in the callback from .load(), create a hidden , give it the width of #myDiv and load the results into it. Read the height of the hidden div, and do an animation to that height for #myDiv. delete the hidden div.
You need jQuery.animate. With it, you can animate any property to any value. In your case, you would animate the height from it's previous value to the new value.
Note, though, that you need to record the old value before replacing the content, as it's height (if not set absolute) will be updated when the contents are updated. Perhaps it could be beneficial to resize a wrapping container.
Like so:
<div class="wrapper"> <div>Content is here</div></div>If you set the value of overflow to hidden for the .wrapper, you can then resize it to match the height of the inner div to achieve the effect you're after.