Div, которые появляются и исчезают в цикле

Я посмотрел на все остальные вопросы, похожие или идентичные моим, но я все еще не могу найти то, что я ищу. Я все еще новичок в jquery, но все, чего я хочу, - это чтобы мои три дива были в цикле и постепенно исчезали, когда они менялись. То, что я вижу, это люди, использующие высокие скорости, первый 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 будет отображаться под текущим, а затем текущий исчезнет, ​​а следующий движется вверх, где, как я хочу, чтобы он оставался вертикально выровненным, просто исчезнуть и в то время как в цикле, поэтому он всегда возвращается к первому, а затем идет снова. Я думал, что это будет легче сделать, но, видимо, нет. Я пытался использовать кодирование из того, что я видел из других вопросов, но я просто не могу найти то, что я ищу конкретно.

Источник

3 ответа

Если вы хотите сделать это в чистом CSS, вы можете сделать это, используя @keyframes

Это решение очень специфично для варианта использования. Имея 3 деления и 3 секунды видимости.

У вас может быть время X секунд, чтобы все дивы отображались один раз в цикле.

Дайте каждому div свою долю X и повторите анимацию.

Для простоты я определил X как 6 секунд, так что каждый из ваших обзоров получает 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>

Источник

Вот быстрая реализация с использованием jQuery с плагином "Slick" для карусели. Запустите демо ниже, чтобы увидеть его в действии.

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

Источник

Если вы хотите постепенно затухать и выгружать все деления в цикле. Вы можете сделать следующее

проверить этот фрагмент

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

Надеюсь, поможет

Источник
Другие вопросы по тегам