Гладкая JQuery изменить размер и исчезнуть

Question

Я пытаюсь перезагрузить содержимое div (которое может измениться по высоте) плавно. Я посмотрел на fadeIn(), animate() и т. Д. И не смог найти ничего, что дало бы плавный эффект.

Код, из которого я получил лучший результат:

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...

Частично эффект, который меня не устраивает - это скачок содержимого ниже div при изменении html-контента, есть ли способ заставить изменение размера происходить, когда оно исчезает, не зная высоты нового контента? (или мне нужно загрузить его в div заполнителя, чтобы вычислить новую высоту)

Answer 1

Попробуй вот так

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

скрипт

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

DEMO

Answer 2

У меня была такая же проблема не так давно... в моем решении это решить получить высоту div ("test") с его новым содержимым и анимировать высоту до этого значения. В результате div изменяет высоту при переходе к новому контенту, а следующий контент следует анимации вверх и вниз.

Удачи