Smooth jquery resize and fade -

i'm attempting reload contents of div (which may change in height) smoothly. i've looked @ fadein(), animate() etc. , not been able find gives smooth effect.

the code i've gotten best result is:

jquery(document).ready(function() {  jquery('#click').live("click", function() {   jquery('#test').animate({'opacity': 0}, 500, function () {    jquery(this).html('new text');   }).animate({'opacity': 1}, 600);  }); });   <div id="test" style="width:400px;"> old text many lines long , contains pointless info when click below rid of <span id="click">link</span>. </div> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ more content... 

the part of effect i'm not happy jump of content below div when html content changes, there anyway resize happen fades out without knowing height of new content? (or need load place holder div calculate new height)

try this

<input id="btn" type="button" value="click" /> <div id="child">  asda     <br/> asd      <br/> asd      <br/> asd      <br/> asd </div> 

script

$("#btn").click(function(){  $("#child").slidetoggle(); }); 

demo