Divs 一次出现而不是单独出现

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

Answer 2

我能想到的最简单的方法是使用动画函数的返回值中可用的承诺，并使用 array#reduce 链接它们

var customerComments = $(".customercomment");

function doit() {
    [].reduce.call(customerComments, function(p, unused, i) {
        var $comment = customerComments.eq(i);
        return p.then(function() {
            return $comment.fadeIn("slow").promise().then(function() {
                return $comment.delay(600).fadeOut("slow").promise();
            });
        });
    }, $.when()).then(doit);
}
doit();

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