Question

我的div ID为 testimonials 且height为auto。 div中有section个高度不同的section个。我目前正在运行一个脚本，一次只显示一个#testimonials，并激活不透明度。我想找到一个解决方案，允许height在显示新section时为<div id="testimonials"> <section> <p>This is the first quote.</p> </section> <section> <p>This is the second quote. It is taller than the previous section.</p> </section> <section> <p>This is the third quote. It is even taller than the previous section two sections.</p> </section> </div>设置动画。

HTML结构

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

  function showNextTestimonial() {
    ++testimonialIndex;
    testimonials.eq(testimonialIndex % testimonials.length)
    .fadeIn(2000)
    .delay(2000)
    .fadeOut(2000, showNextTestimonial);
  }

showNextTestimonial();
})();

的jQuery

:hover

您可以看到我的CodePen作为一个有效的例子。

<小时/>

我尝试过什么

尝试使用max-height来设置高度动画是不可能的，因为我没有使用:hover，这似乎是让它工作的唯一方法。出于与:hover相同的原因，我也无法使用transform: scale()。我发现的解决方案似乎依赖于pageload，只会触发window.onresize，onclick，section或其他在可见时无法更新的内容height更改。

如何设置div WHERE的{{1}}动画，其内容每6秒更换一次？

Answer 1

使用显示的#testimonials高度为section的高度设置动画。

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

您可能希望将overflow: auto添加到部分以防止使用p内部边距崩溃

section {
    display: none;
    overflow: auto;
}

Answer 2

我已经接近解决方案，但问题在于回调，并且高度更新会有轻微的延迟。

＆＃13;

(function() {
  var h = $("#testimonials section");
  var testimonials     = $("#testimonials section p");
  var testimonialIndex = -1;

  function showNextTestemonial() {
    ++testimonialIndex;
  
   
  testimonials.eq(testimonialIndex % testimonials.length )
    .fadeIn(function(){h.height($(this).innerHeight());})
    .delay(2000)
    .fadeOut(showNextTestemonial);
  }

showNextTestemonial();
})();

＆＃13;

section p{
  display: none;
}
section {
  -webkit-transition: height 0.3s ease;
  -moz-transition: height 0.3s ease;
  -o-transition: height 0.3s ease;
  transition: height 0.3s ease;
}
#testimonials {
  width: 100px;
  color: white;
  padding: 10px;
  margin: 0 auto;
  background: red;
  -webkit-transition: height 0.3s ease;
  -moz-transition: height 0.3s ease;
  -o-transition: height 0.3s ease;
  transition: height 0.3s ease;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testimonials">
  <section>
    <p>This is the first quote.</p>
     <p>This is the second quote. It is taller than the previous section.</p>
    <p>This is the third quote. It is even taller than the previous section two sections.</p>
  </section>
 
</div>

＆＃13;

希望有所帮助。我保存了你的Codepen的一个分支来玩Here

div的动画高度随着内容的变化而变化？

HTML结构

的jQuery

我尝试过什么

2 个答案: