更改内容后的JQuery动画元素高度答案

【问题标题】：JQuery animate element height after changing content更改内容后的JQuery动画元素高度
【发布时间】：2016-10-14 19:32:04
【问题描述】：

我想在加载 Ajax 数据后自动调整 div 元素的大小。到目前为止，我在让它更高方面没有任何问题

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

但这仅在第一次有效，之后oldSize和newSize无论如何都一样，它不会使div更小
有谁知道我可以如何更改@987654325 @property 以流畅的方式动态动态？

如果您知道我想为新主题创建某种预览/建议，就像在此页面上一样，当您想创建一个新问题 @ 987654326@Box

感谢您的帮助

【问题讨论】：

标签： jquery

【解决方案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

【讨论】：

非常感谢。当我第一次单击DivShort 时，它会变小，但当我在单击DivLong 后单击DivShort 时，它仍然保持相同的大小。你明白我想说什么吗？抱歉英语不好^^"
对不起，我不太明白。你在尝试上面的sn-p吗？首先，单击 DivShort，然后单击 DivLong。它应该调整为最后点击的 div 的大小。
是的...但是当您再次单击 DivShort 时，它会保持高并且不会再次变小。我刚刚找到了另一个解决方案......当我在函数的开头使用 $("#DivPreview").removeAttr('style'); 时，一切正常
是的，但是你可能会失去动画。

【解决方案2】：

我会建议将oldSize 放入一个全局变量中，或者将其放入#DivPreview 的$.data 中，以使其始终保持不变：

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 });
}

【讨论】：