javascript - Div 一次出现而不是单独出现

Question

我在容器中有一组 div。我想让这些div出现在div的顶部，一个接一个，使用淡入淡出的效果。目前我正在使用 for 循环来尝试实现这一点，但结果很奇怪。它不是遍历类元素，而是一次显示所有元素。我一直在努力找出问题所在，但我似乎找不到问题所在。

var customerComments = $(".customercomment");

for (var i = 0; i < customerComments.length; i++) {
  $(customerComments[i]).fadeIn("slow", function() {
    $(customerComments[i]).delay(600).fadeOut("slow");
  })
}

/*STYLING FOR TESTIMONIALS SECTION */

#customerreviews {
  background-color: #5a2a27;
  min-height: 300px;
}

.customercomment {
  margin-top: 20px auto;
  padding: 20px 120px;
  text-align: center;
  display: none;
}

.customercomment p {
  font-size: 30px;
  line-height: 45px;
}

.customercomment h4 {
  border-top: 1px solid white;
  margin: 0 auto;
  width: 50%;
  padding-top: 20px;
}

.location {
  font-size: 20px;
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="testimonials">
  <div class="container">
    <div class="row text-center">
      <div class="col-md-12">
        <h1>TESTIMONIALS FROM OUR MEMBERS</h1>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-md-12" id="customerreviews">
        <div class="customercomment text-center">
          <p>"What I find to be the best thing about Elite Fitness Gym, other than the facilities they have to offer, is their overall service and the fact that they do not tie you down to a contract. They make things as easy as possible, inside and outside
            the gym, in every way!"</p>
          <h4>Rachel Smith<span class="location"> (Manchester)</span></h4>
        </div>
        <div class="customercomment text-center">
          <p>"I am blown away at how cheap the membership is and how much we get back in return. I take full advantage of the MMA classes they offer! I also like the fact that there is more than one class per week, which offers me flexibility - something
            I need with my busy schedule."</p>
          <h4>Darren Wise<span class="location"> (London)</span></h4>
        </div>
        <div class="customercomment text-center">
          <p>"I am really impressed with the amount of equipment Elite Fitness Gym offer. Even during rush hour I rarely find myself waiting around for equipment. They have certainly done a fantastic job there. I like to keep my workouts short but intense,
            so its a great benefit for me."</p>
          <h4>Arif Akhtar<span class="location"> (Leeds)</span></h4>
        </div>
        <div class="customercomment text-center">
          <p>"I've been around the block with a number of gyms, but what sets Elite Fitness Gym apart from the rest is their ability to always improve on their service and benefits. I dont feel the need to look elsewhere because this gym is always growing
            and taking fantastic, ongoing care of its members."</p>
          <h4>Jason Hardy<span class="location"> (London)</span></h4>
        </div>
        <div class="customercomment text-center">
          <p>"I am a big lover of swimming and the facilities that Elite Fitness Gym offer, not just with resistance workouts, but also with cardio, is what encouraged me to join in the first place. I must say that I am so happy with the decision as they
            really do have great facilities here."</p>
          <h4>Michelle Rousey<span class="location"> (Birmingham)</span></h4>
        </div>
        <div class="customercomment text-center">
          <p>"The thing I benefit from most about Elite Fitness Gym is their timings. They are open 24 hours a day so it gives me a chance to drop in and do my workout just before going to work on my nightshifts. I am grateful to be able to attend such a
            great gym during those hours of the day."</p>
          <h4>Jermaine Clarke<span class="location"> (Bristol)</span></h4>
        </div>
      </div>
    </div>
  </div>
</section>

谢谢你的帮助!

Answer 1

我测试了以下内容，它逐一淡化了 div。虽然它不使用 fadeOut 函数，但它仍然使用 fadeIn 函数。

$($(".customercomment").get().reverse()).each(function(fadeInDiv) {
     $(this).delay(fadeInDiv * 600).fadeIn(1000);
});