Question

问题

我有一个显示客户推荐的横幅。

下一个按钮淡出当前_totalFilesSent元素并淡入下一个li元素。

上一个按钮反过来。

但是，如果两张幻灯片之间的高度不同，则容器的高度会突然改变。

过渡如何变得更加平滑，高度的变化与使用li的方式类似？

代码

animate()

var n = 1;
$("ul.banner_testi>li").each(function() {
  $(this).attr("data-banner", n);
  n++;
});
$("ul.banner_testi>li").slice(1).hide();
$(".testi.next").click(function() {
  var tt = parseInt($("ul.banner_testi>li:last").attr("data-banner"));
  var tb = parseInt($("ul.banner_testi>li:visible:first").attr("data-banner"));
  var nb = tb + 1;
  if (nb > tt) {
    nb = 1;
  }
  $("ul.banner_testi>li[data-banner='" + tb + "']").fadeOut(250);
  setTimeout(function() {
    $("ul.banner_testi>li[data-banner='" + nb + "']").fadeIn();
  }, 251);
});
$(".testi.prev").click(function() {
  var tt = parseInt($("ul.banner_testi>li:last").attr("data-banner"));
  var tb = parseInt($("ul.banner_testi>li:visible:first").attr("data-banner"));
  var nb = tb - 1;
  if (nb === 0) {
    nb = tt;
  }
  $("ul.banner_testi>li[data-banner='" + tb + "']").fadeOut(250);
  setTimeout(function() {
    $("ul.banner_testi>li[data-banner='" + nb + "']").fadeIn();
  }, 251);
});

a.unslider-arrow {
  position: absolute;
  left: 10px;
  color: white;
  z-index: 2;
  text-shadow: none;
  opacity: 0.5;
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  transition: opacity .5s;
  top: calc(50% - 12px);
  font-size: 24px;
  line-height: 24px;
}
a.unslider-arrow:hover {
  opacity: 1;
  -webkit-transition: opacity .2s;
  -moz-transition: opacity .2s;
  transition: opacity .2s;
}
a.unslider-arrow.next {
  right: 10px;
  left: auto;
}
.testimonials {
  background: #333;
  color: #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
  width: 100%;
  max-width: 100%;
  position: relative;
  padding: 50px 30px;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
.testimonials ul {
  width: 100%;
  max-width: 1080px;
  margin: auto;
  position: relative;
}
.testimonials ul li {
  margin: 20px 50px auto;
  font-size: 16px;
  font-style: italic;
  text-shadow: 0 1px 1px #000;
  color: #eee;
}
.testimonials ul li span {
  display: block;
  color: #ccc;
  font-size: 12px;
  text-transform: uppercase;
  text-align: right;
  font-style: normal;
  font-weight: normal;
  margin-top: 1em;
}

Answer 1

只需将min-height提交给ul即可。调整你想要的方式，但要记住最小高度必须是最大项目的大小。

由于您不了解最重要的元素，我们通过javascript查看最大的元素：

var maxHeight=0;
$(".banner_testi li").each(function () {
    $this = $(this);
    if ( $this.outerHeight() > maxHeight ) {
        maxHeight=$this.outerHeight();
    }
});

然后我们为所有元素设置高度：

$(".banner_testi li").height(maxHeight);

＆＃13;

var n = 1;

var maxHeight=0;
$(".banner_testi li").each(function () {
    $this = $(this);
    if ( $this.outerHeight() > maxHeight ) {
        maxHeight=$this.outerHeight();
    }
});
$(".banner_testi li").height(maxHeight);


$("ul.banner_testi>li").each(function() {
  $(this).attr("data-banner", n);
  n++;
});
$("ul.banner_testi>li").slice(1).hide();
$(".testi.next").click(function() {
  var tt = parseInt($("ul.banner_testi>li:last").attr("data-banner"));
  var tb = parseInt($("ul.banner_testi>li:visible:first").attr("data-banner"));
  var nb = tb + 1;
  if (nb > tt) {
    nb = 1;
  }
  $("ul.banner_testi>li[data-banner='" + tb + "']").fadeOut(250);
  setTimeout(function() {
    $("ul.banner_testi>li[data-banner='" + nb + "']").fadeIn();
  }, 251);
});
$(".testi.prev").click(function() {
  var tt = parseInt($("ul.banner_testi>li:last").attr("data-banner"));
  var tb = parseInt($("ul.banner_testi>li:visible:first").attr("data-banner"));
  var nb = tb - 1;
  if (nb === 0) {
    nb = tt;
  }
  $("ul.banner_testi>li[data-banner='" + tb + "']").fadeOut(250);
  setTimeout(function() {
    $("ul.banner_testi>li[data-banner='" + nb + "']").fadeIn();
  }, 251);
});

＆＃13;

a.unslider-arrow {
  position: absolute;
  left: 10px;
  color: white;
  z-index: 2;
  text-shadow: none;
  opacity: 0.5;
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  transition: opacity .5s;
  top: calc(50% - 12px);
  font-size: 24px;
  line-height: 24px;
}
a.unslider-arrow:hover {
  opacity: 1;
  -webkit-transition: opacity .2s;
  -moz-transition: opacity .2s;
  transition: opacity .2s;
}
a.unslider-arrow.next {
  right: 10px;
  left: auto;
}
.testimonials {
  background: #333;
  color: #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
  width: 100%;
  max-width: 100%;
  position: relative;
  padding: 50px 30px;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
.testimonials ul {
  width: 100%;
  max-width: 1080px;
  margin: auto;
  position: relative;
}
.testimonials ul li {
  margin: 20px 50px auto;
  font-size: 16px;
  font-style: italic;
  text-shadow: 0 1px 1px #000;
  color: #eee;
}
.testimonials ul li span {
  display: block;
  color: #ccc;
  font-size: 12px;
  text-transform: uppercase;
  text-align: right;
  font-style: normal;
  font-weight: normal;
  margin-top: 1em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testimonials">
  <ul class="banner_testi">
    <a href="javascript:void(0)" class="unslider-arrow prev testi"><</a>
    <a href="javascript:void(0)" class="unslider-arrow next testi">></a>
    <li>One Line Quote<span>Client Name</span>
    </li>

    <li>Three
      <br>Line
      <br>Quote<span>Client Name</span>
    </li>

    <li>Two Line
      <br>Quote<span>Client Name</span>
    </li>
  </ul>
</div>

＆＃13;

修改增加了计算最大高度的功能并设置为所有元素。

平滑滑动具有可变高度内容的容器被淡入/淡出

1 个答案: