我在容器中有一组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>
感谢您的帮助！
答案 0 :(得分：2)
我测试了以下内容，它逐个淡化div。虽然它不使用fadeOut函数，但它仍然使用fadeIn函数。
$($(".customercomment").get().reverse()).each(function(fadeInDiv) {
$(this).delay(fadeInDiv * 600).fadeIn(1000);
});
答案 1 :(得分：1)
我能想到的最简单方法是使用动画函数返回值中的promises，并使用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>