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>

现在我为他们分别开设课程，但我宁愿通过调用＃34; #Reviews div＆＃34;来设置查询淡入和淡出。类似的东西，但如果需要让我的淡入/淡出工作，更改div的类名是很好的。如果需要，我更愿意添加评论，而只是根据班级名称或仅作为div进行调整。我也看到编码会淡化我的div，但是下面的div会显示在当前的div之下，然后当前的div会消失，随后会向上移动，我希望它保持垂直对齐顶部只是在一个循环中淡入淡出，所以它总是回到第一个然后再去。我认为这样做会更容易，但显然不是。我尝试过使用我从其他问题中看到的编码，但我无法找到我特别想要的东西。

Answer 1

如果您想在纯CSS中执行此操作，可以使用@keyframes

执行此操作

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

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

给每个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

如果你想在循环中淡化和淡出所有div。你可以按照以下方式执行

检查此代码段

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

希望有所帮助

Answer 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

在循环中淡出和淡出的Div

3 个答案: