循环淡入淡出的 div

Question

我查看了与我的相似或相同的所有其他问题，但我仍然找不到我要查找的内容。我还是 jquery 的新手，但我只想让我的三个 div 处于循环状态，并在它们发生变化时淡入淡出。我看到的是人们使用快速的速度，第一个 div 也会淡入，然后其余部分会跟随，但我希望第一个 div 在页面加载时出现，然后在一段时间后切换。这是我的 html

<div id="Reviews">
    <div class="Review1">
       <p>Customer Review 1</p>
       <span class="CustomerName">- Bob</span>
     </div>
     <div class="Review2">
       <p>Customer Review 2</p>
       <span class="CustomerName">- Mary</span>
     </div>
        <div class="Review3">
        <p>Customer Review 3</p>
        <span class="CustomerName">- Jess</span>
     </div>
</div>

现在我为它们设置了单独的类，但我宁愿通过使用“#Reviews div”之类的调用来设置查询以淡入和淡出，但是如果需要更改 div 的类名也可以我的淡入/淡出工作。如果需要，我宁愿只添加评论，它只会根据类名或只是作为一个 div 进行调整。我还看到编码会使我的 div 褪色，但以下 div 将显示在当前 div 下方，然后当前 div 将消失，随后向上移动，我希望它保持垂直对齐，顶部只是淡入和在循环中退出，所以它总是回到第一个然后再去。我认为这会更容易做到，但显然不是。我尝试使用从其他问题中看到的编码，但我找不到我正在寻找的具体内容。

Answer 1

如果你想在纯 CSS 中做到这一点，你可以做到，使用 @keyframes

此解决方案非常特定于用例。有 3 个 div 和 3 秒的可见性。

您可以有 X 秒的时间让所有 div 在一个循环中显示一次。

给每个 div 其 X 份额并重复动画。

为了简单起见，我将 X 定义为 6 秒，因此您的每个评论 div 都有 3 秒的时间。

如果您正在寻找一些灵感来自己实现某些东西，希望这可以成为您的起点。

.reviews {
  position: relative;
}
.review {
  position: absolute;
  transform-style: preserve-3d;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.review-1 {
  animation-name: reviewOne;
  color: red;
}
.review-2 {
  animation-name: reviewTwo;
  color: blue;
}
.review-3 {
  animation-name: reviewThree;
  color: green;
}
@keyframes reviewOne {
  0% {
    opacity: 1;
  }
  32% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  100% {
    opacity: 0
  }
}
@keyframes reviewTwo {
  0% {
    opacity: 0;
  }
  32% {
    opacity: 0;
  }
  33% {
    opacity: 0.5;
  }
  34% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0
  }
}
@keyframes reviewThree {
  0% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  66% {
    opacity: 0.5;
  }
  67% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

<div id="reviews">
  <div class="review review-1">
    <p>Customer Review 1</p>
    <span class="CustomerName">- Bob</span>
  </div>
  <div class="review review-2">
    <p>Customer Review 2</p>
    <span class="CustomerName">- Mary</span>
  </div>
  <div class="review review-3">
    <p>Customer Review 3</p>
    <span class="CustomerName">- Jess</span>
  </div>
</div>

Answer 2

这是一个使用带有"slick" carousel plugin 的jQuery 的快速实现。运行下面的演示以查看它的实际效果。

$(document).ready(function() {
  $('#Reviews').slick({
    fade: true, // change transition from slide to fade
    autoplay: true, // autoplay the slideshow so no interaction needed
    arrows: false // remove the default Prev/Next arrrows
  });
});

<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>

<div id="Reviews">
  <div class="Review1">
    <p>Customer Review 1</p>
    <span class="CustomerName">- Bob</span>
  </div>
  <div class="Review2">
    <p>Customer Review 2</p>
    <span class="CustomerName">- Mary</span>
  </div>
  <div class="Review3">
    <p>Customer Review 3</p>
    <span class="CustomerName">- Jess</span>
  </div>
</div>

Answer 3

如果你想在一个循环中淡入淡出所有的div。你可以这样做

检查这个sn-p

$(document).ready(function() {

  setInterval(function() {
    fadeinOut();
  }, 1000)
});
var count = -1;

function fadeinOut() {
  var reviews = $('#Reviews div');
  var reviewLength = reviews.length - 1;

  count < reviewLength ? count++ : count = 0;
  reviews.fadeOut().delay(2000).eq(count).fadeIn().addClass('top');
}

#Reviews div {} #Reviews {
  position: relative;
}
#Reviews div:not(.Review1) {
  display: none;
}
.top {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Reviews">
  <div class="Review1">
    <p>Customer Review 1</p>
    <span class="CustomerName">- Bob</span>
  </div>
  <div class="Review2">
    <p>Customer Review 2</p>
    <span class="CustomerName">- Mary</span>
  </div>
  <div class="Review3">
    <p>Customer Review 3</p>
    <span class="CustomerName">- Jess</span>
  </div>
</div>

希望对你有帮助