Divs appearing all at once rather than individually

Question

I have a set of divs within a container. I want these divs to appear at the top of the div, one by one, using the fade-in and then fade-out effect. At the moment I am using a for loop to try and achieve this, but it is having a strange result. Instead of iterating through the class elements, it is displaying them all at once. I have been trying to figure out the problem, but I just cant seem to find the issue.

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




  
    
      
        TESTIMONIALS FROM OUR MEMBERS
      
    
    
      
        
          "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!"
          Rachel Smith (Manchester)
        
        
          "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."
          Darren Wise (London)
        
        
          "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."
          Arif Akhtar (Leeds)
        
        
          "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."
          Jason Hardy (London)
        
        
          "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."
          Michelle Rousey (Birmingham)
        
        
          "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."
          Jermaine Clarke (Bristol)

Thank you for the help!

Jaromanda X · Accepted Answer

Easiest way I can think of is using the promises available in the returned value of the animation functions, and chain them using 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;
}




  
    
      
        TESTIMONIALS FROM OUR MEMBERS
      
    
    
      
        
          "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!"
          Rachel Smith (Manchester)
        
        
          "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."
          Darren Wise (London)
        
        
          "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."
          Arif Akhtar (Leeds)
        
        
          "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."
          Jason Hardy (London)
        
        
          "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."
          Michelle Rousey (Birmingham)
        
        
          "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."
          Jermaine Clarke (Bristol)

Divs appearing all at once rather than individually

Answers (2)

Related Questions