Высота элемента анимации JQuery после изменения содержимого

Question

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

success: function (data) { 
       var oldSize = $("#DivPreview").height(); 
       $("#DivPreview").html(data.d); 
       var newSize = $("#DivPreview").height(); 
       $("#DivPreview").height(oldSize).animate({ height: newSize }); 
} 

Но это работает только в первый раз, после этого oldSize и newSize такие же, не имеет значения, что и это не делает div меньше
Кто-нибудь знает, как я могу изменить свойство Height динамически плавно?

Если вам полезно знать, что я хочу, чтобы создать какой-то предварительный просмотр/предложение новых тем так же, как на этой странице, если вы хотите создать новый вопрос, который "Questions that may already have your answer" Box

Спасибо вашей помощи

Answer 1

использование scrollHeight вместо. Height() устанавливает значение css и поэтому не обновляется второй раз. Поскольку высота установлена ​​на родительском, вам нужно вычислить размер содержимого.

function resizeDiv (elements) { 
 
    // This will actually just get the css value (which was set last time) 
 
    var oldSize = $("#DivPreview").height(); 
 
    $("#DivPreview").html(elements); 
 
    // Since height is already set, we calculate the size of the contents instead. 
 
    var newSize = $("#DivPreview ul")[0].scrollHeight; 
 
    $("#DivPreview").height(oldSize).animate({ height: newSize }); 
 
} 
 

 
$('#DivLong, #DivShort').click(function(){ 
 
    var $el = $(this).html(); 
 
    resizeDiv($el); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="DivPreview"> 
 
<ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
</ul> 
 
</div> 
 

 
<div id="DivShort"> 
 
<ul> 
 
    <li>One (click me)</li> 
 
    <li>Two</li> 
 
</ul> 
 
</div> 
 

 
<div id="DivLong"> 
 
<ul> 
 
    <li>One (click me)</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Siz</li> 
 
    <li>Seven</li> 
 
    <li>Eight</li> 
 
    <li>Nine</li> 
 
</ul> 
 
</div>

Смотрите ответ ниже для получения дополнительной информации.

jQuery height() not changing on resize

Answer 2

I предложит поставить oldSize в глобальной переменной или положить его в $.data из #DivPreview следующим способом так, что она сохраняется на всем протяжении времени:

success: function (data) { 

    var oldSize = $("#DivPreview").data("oldSize") != null ? $("#DivPreview").data("oldSize") : $("#DivPreview").height(); 
    $("#DivPreview").data("oldSize", oldSize); 

    $("#DivPreview").html(data.d); 
    var newSize = $("#DivPreview").height(); 
    $("#DivPreview").height(oldSize).animate({ height: newSize }); 
}