Question

我有一个我正在开发的网页的推荐部分，它将使用jQuery fadeIn()＆amp; amp;循环播放许多不同的推荐评论。 fadeOut()

如果我没有将该部分的高度指定到设定的高度，那么高度将根据推荐评论的长度而改变，下面的其余部分将跳转。

由于我使用Wagtail（基于Django的CMS）创建此站点，所以我希望能够根据最长的推荐评论自动计算适当大小的部分高度。

这是我到目前为止的代码：

HTML：

<section class="bg-primary testimonial-wrapper" id="testimonials">
          <div class="container">
            <div class="row">
              <div class="col-xs-2 col-xs-offset-2">
                <i class="fa fa-4x fa-quote-left"></i>
              </div>
              <div class="col-xs-6 testimonial-wrapper">
                <div class="testimonial-item">
                  <p>Testimonial comment 1.</p>
                  <p><em>- Oliver Nicholson</em></p>
                </div>
                <div class="testimonial-item">
                  <p>Another quote!</p>
                  <p><em>- Nollie Bollie</em></p>
                </div>
              </div>
            </div>
          </div>
        </section>

的jQuery / JS：

$(document).ready(function() {

  var testimonials = $(".testimonial-item");
  testimonials.hide();
  var testimonialIndex = -1;

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

  showNextTestimonial();

});

有没有办法计算min-height的{{1}}，以便testimonial-wrapper部分能够容纳每条评论而不会在从一条评论过渡到下一条评论时改变大小？

Answer 1

您可以遍历项目并找到最大高度，然后将容器设置为该高度。

请参阅此处接受的答案：element with the max height from a set of elements

工作代码示例：

public void SavePreferences(String key, String value,Conext mContext){

 SharedPreferences sharedPreferences = PreferenceManager.getDefaultSharedPreferences(mContext);
 .....
}

jsfiddle https://jsfiddle.net/dattaproffs/h3pu6y25/1/

/ F

Answer 2

https://jsfiddle.net/seahorsepip/jztcnoah/

  //Get max height
  var wrapperHeight = 0;
  testimonials.each(function() {
    wrapperHeight = $(this).outerHeight() > wrapperHeight ? $(this).outerHeight():wrapperHeight;
  });
  //Set max height
  $(".testimonial-wrapper").height(wrapperHeight);

通过更改内容找到div的最小高度，以便下面的页面不会跳转

2 个答案: