jquery - 使用 jQuery(扩展它)为 div 的高度设置动画时出现意外结果？

Question

我做了一个切换，如果你点击阅读更多链接，它会展开一个 div:

$(".user-review-toggle").toggle(function(){
    // Change the height of the element to auto so we can get that value, and use it in our expanding animation.
    var currentUserReview = $(this).prev('.user-review');
    currentUserReview.css('height', 'auto');
    var calculatedHeight = currentUserReview.height();

    $(this).css("display", "none");
    $(this).css("backgroundPosition", "0 -12px");
    currentUserReview.animate({height: calculatedHeight}, 0, function () {
        $(this).css("overflow", "visible");
        $(this).css("line-height", "140%"); // Change it back to the original value
    });

折叠文本时div的高度:

.has-photo .user-contribution .user-review, .has-review .user-contribution .user-review {
height: 98px;
}

它首先暂时将 div 的高度设置为自动，以便它可以存储其原始大小。然后它将 div 的高度设置为该高度。

现在的问题是字符多的时候会膨胀过度，字符少的时候膨胀不够。在文本旁边放一张图片也会让最终结果有点出乎意料(正如您在屏幕截图中看到的那样):

折叠:

展开: 有什么解决这个问题的建议吗？

Answer 1

您是否为图像设置了 & 高度？尝试这样做。未加载图像时，它们根本不占用任何空间。尝试设置图像的尺寸。 希望对您有所帮助。