Divs that fade in and out in a loop

Question

I've looked at all the other questions similar or identical to mine but I still can't find what I'm looking for. I'm still new to jquery but all I want is my three divs to be on loop and fade in and out when they change. What I'm seeing is people using fast speeds, the first div also fades in and then the rest will follow but I want the first div to just be present when the page loads and then switch after some time. Here's my 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>

Now I have separate classes for them but I'd rather set up the query to fade in and out by calling using "#Reviews div" something like that, but changing the class names of the divs is fine if needed to make my fade in/out to work. I'd prefer to just add reviews if needed and it'll just adjust by the class name or just by being a div. I'm also seeing coding that'll fade my divs but the following div will show up below the current one and then the current one will disappear and the following moves up, where as I want it to stay vertically aligned top just fade in and out while on a loop so it always goes back to the first and then goes again. I thought this would be easier to do but apparently not. I've tried using coding from what I saw from other questions but I just can't find what I'm looking for specifically.

Answer 1

If you want to fadein and fadeout all the divs in a loop .you can do as the following

check this snippet

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

Hope it helps

Answer 2

Here's a quick implementation using jQuery with the "slick" carousel plugin. Run the demo below to see it in action.

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

If you want to do this in pure CSS, You could do it, using @keyframes

This solution is very specific to the use case. Having 3 divs and 3 seconds of visibility.

You could have the time of X seconds for all the divs to be displayed once in a cycle.

Give each div its share of X and repeat the animations.

For the sake of simplicity, I defined X as 6 seconds, so each of your review divs get 3 seconds of time.

If you are looking for some inspiration, to implement something on your own, hopefully this could be your starting point.

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