Jquery анимирует изменения высоты div при загрузке ajax

Question

Я делаю простую загрузку AJAX, чтобы получить результаты поиска и отобразить их в div:

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

Это все работает нормально, и div обновляется, как и ожидалось. myDiv уменьшается или увеличивается в зависимости от количества возвращаемых результатов.

Как я могу оживить рост / сжатие?

Я знаю, что могу использовать slideUp / slideDown или показать / скрыть, например,

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

Однако я не хочу сначала сжимать или скрывать его - я хочу, чтобы высота переходила от его значения до загрузки ajax к значению после загрузки ajax.

Возможно ли это?

Answer 1

Сначала необходимо остановить автоматическое изменение размера.

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

, а затем, когда загрузка завершится, мы оборачиваем содержимое в div и используем его для пересчета высоты.

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

Демо

Answer 2

Вам нужно jQuery.animate. С его помощью вы можете анимировать любое свойство на любое значение. В вашем случае вы бы анимировали height от его предыдущего значения до нового значения.

Обратите внимание, что вам необходимо записать старое значение перед заменой содержимого, так как его высота (если не установлена ​​абсолютная) будет обновляться при обновлении содержимого. Возможно, было бы полезно изменить размер упаковочного контейнера.

Вот так:

<div class="wrapper">
    <div>Content is here</div>
</div>

Если вы установите значение overflow на hidden для .wrapper, вы можете изменить его размер в соответствии с высотой внутреннего div, чтобы добиться желаемого эффекта.

Answer 3

Give # myDiv a style = "position: относительный;" .Затем в обратном вызове из .load () создайте скрытый , присвойте ему ширину # myDiv и загрузите в него результаты.Прочитайте высоту скрытого div и выполните анимацию для этой высоты для # myDiv .удалить скрытый div .