Javascript 如何在图像仍在加载时设置div高度的动画？

我的代码通过清空HTML标记并替换内容来显示页面。 加载不同内容时，父div的高度会发生变化，但我无法使高度变化平滑过渡。这可能与仍在加载的图像有关。在这两个州之间过渡的好方法是什么

// first fade out
$(".page").animate({opacity:0}, 600, function() {
        // then replace html
        $(".page").html("new html here including an <img src='image.jpg'><br>and more text.");
        // now calculate new height and then fade in again
        var endHeight = $(".page").height();
        $(".page").animate({opacity:1, height:endHeight});
});

//第一次淡出
$（“.page”）.animate（{opacity:0}，600，function（）{
//然后替换html
$（“.page”）.html（“此处的新html包括
和更多文本。”）；
//现在计算新高度，然后再次淡入
var endHeight=$（“.page”）.height（）；
$（“.page”）.animate（{opacity:1，height:endHeight}）；
});

您尝试过css转换吗

.YOUR_DIV{
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
}

---

假设您有一个

div

元素作为内容的容器。如果您正在加载可能需要一些明显时间才能加载的内容（例如图像），则可以等待加载新元素，然后手动重新设置容器的高度。这样做，结合CSS3转换，将防止容器在实际显示内容之前设置动画

从小提琴上：

$(document).ready(function() {

    var container = $('.container');

    /* ... */

    function replaceContent(container) {
        var content = new Image();
            content.onload = function(e) {
                container.empty().append(content);
                container.css({'height': content.height});
            };
            content.src = getRandomImageUrl();
    };

    setInterval(function() { replaceContent(container); }, 5000);

});

---

JSFIDLE上的工作示例：

请提供FIDLE或测试页面。