Smooth jquery resize and fade

Question

I'm attempting to reload the contents of a div (which may change in height) smoothly. I've looked at fadeIn(), animate() etc. and not been able to find anything that gives a smooth effect.

The code I've gotten the best result from 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;">
My old text is many lines long and contains some pointless info however when you click below we will get rid of it all <span id="click">Link</span>.
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
More content...

The part of the effect I'm not happy with is the jump of the content below the div when the html content changes, is there anyway to get the resize to happen as it fades out without knowing the height of the new content? (or do I need to load it into a place holder div to calculate the new height)

Answer 1

Try like 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

Answer 2

I had the same problem not long ago ... in my solution is decide to get the height of the div ("test") with its new content and animate the height to this value. As a result the div changes height while fading to the new content and the following content follows the animation up and down.

Good luck