Javascript 通过更改内容设置div高度的动画？

我有一个ID为

的
div
，其高度为
自动
。在
div
中有许多高度不同的
部分。我当前运行的脚本一次只显示一个
部分
，并设置不透明度的动画。我想找到一个解决方案，当显示新的
部分时，允许
#推荐
为
高度
设置动画

HTML结构
您可以查看我的工作示例。

我试过的
尝试使用动画设置高度是不可能的，因为我没有使用
：hover
，而这似乎是唯一可行的方法。我也不能使用它，因为它依赖于
：hover
。我找到的解决方案似乎依赖于
：悬停
、仅在
页面加载
、
窗口上启动、调整大小
、
单击
，或者在可见
部分更改时不更新的其他内容

如何设置一个
div的
高度
的动画，该div的内容每6秒就被更改一次，如上所述？
我已接近解决方案，但问题在于回调，高度更新有轻微延迟


（函数（）{
var h=$（“证明部分”）；
var证明=$（“证明部分p”）；
var证明指数=-1；
函数shownextestemonial（）{
++鉴定索引；
鉴定书.eq（鉴定书索引%鉴定书.length）
.fadeIn（函数（）{h.height（$（this）.innerHeight（））；}）
.延迟（2000年）
.淡出（显示淡出）；
}
shownextestemonial（）；
})();
第p节{
显示：无；
}
部分{
-webkit过渡：高度0.3s；
-moz过渡：高度0.3s；
-o型过渡：高度0.3s；
过渡：高度0.3s；
}
#推荐书{
宽度：100px；
颜色：白色；
填充：10px；
保证金：0自动；
背景：红色；
-webkit过渡：高度0.3s；
-moz过渡：高度0.3s；
-o型过渡：高度0.3s；
过渡：高度0.3s；
}

这是第一句话

这是第二句话。它比上一节要高

这是第三句话。它甚至比前两段还要高

使用显示的
部分
高度设置
#推荐信
高度动画

(function() {
    var testimonials = $("#testimonials section");
    var testimonialIndex = -1;

    function showNextTestimonial() {
        ++testimonialIndex;
        var section = testimonials.eq(testimonialIndex % testimonials.length);

        section.fadeIn(2000);

        $("#testimonials").animate({
            height: section.outerHeight(true)
        }, 2000);

        section.fadeOut(2000, showNextTestimonial);
    }

    showNextTestimonial();
})();

您可能需要在节中添加
溢出：auto
，以防止页边距内有p时塌陷

section {
    display: none;
    overflow: auto;
}

除了使用jQuery的fadeOut和fadeIn，您还可以切换一个活动类：如果它是活动的，高度是自动的，如果它不是活动的，高度是0px。然后在该部分添加一个转换。@MelvinKoopmans CSS3不支持从任何内容转换到
height:auto
。如果您仅在CSS中尝试，它将立即从0变为为为
auto
计算的值，这与现在发生的情况没有什么不同。我绝对愿意切换类，而不是使用
fadeIn
和
fadeOut
。啊，是的，你是对的。我的错误。你所能做的就是生成一个数组，其中包含每个部分的高度，并在更改项目时循环遍历这些高度。此解决方案只保留HTML结构中的一个
部分。我需要那些额外的
部分
元素。否则我会成功的。感谢你的努力。
(function() {
    var testimonials = $("#testimonials section");
    var testimonialIndex = -1;

    function showNextTestimonial() {
        ++testimonialIndex;
        var section = testimonials.eq(testimonialIndex % testimonials.length);

        section.fadeIn(2000);

        $("#testimonials").animate({
            height: section.outerHeight(true)
        }, 2000);

        section.fadeOut(2000, showNextTestimonial);
    }

    showNextTestimonial();
})();

section {
    display: none;
    overflow: auto;
}