Animate elements one at a time

Question

I would like to make four div's with the class of .statdiv animate one at a time using jQuery.

I was thinking I had to use the $.each() method to loop through the divs in order to animate them one at a time, however they all animate at the same time, instead of 1 by 1.

Any thoughts of why would be greatly appreciated.

Here is the jsfiddle

HTML

  <section class="sub-nav">
    <nav>
      <ul>
      <li><a href="#mission">mission</a></li>
      <li><a href="#why-cs">why-cs</a></li>
      <li><a href="#learning-experience">learning experience</a></li>
      <li><a href="#success">success</a></li>
      </ul>
      <div class="clear"></div>
    </nav>
  </section>
<div id="mission"> mission</div>
<div id="why-cs">
  why-cs
          <div class="stat col-md-3 hide">
          <img class="center-block" src="https://www.google.com/imgres?imgurl=https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/64px-Ski_trail_rating_symbol-green_circle.svg.png&imgrefurl=https://en.wikipedia.org/wiki/Piste&h=64&w=64&tbnid=b1-OSFz6e0HHrM:&docid=PkB0TDgkdOkHwM&ei=62ZlVqyJAYGz-wGjuK4I&tbm=isch&ved=0ahUKEwjsqp6tzMnJAhWB2T4KHSOcCwEQMwhGKCIwIg" alt="statistic">
          <p class="center-block num"> 100 </p>
          <div class="center-block statistic"> statistic #1</div>
        </div>
        <div class="stat col-md-3 hide">
          <img class="center-block" src="https://www.google.com/imgres?imgurl=https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/64px-Ski_trail_rating_symbol-green_circle.svg.png&imgrefurl=https://en.wikipedia.org/wiki/Piste&h=64&w=64&tbnid=b1-OSFz6e0HHrM:&docid=PkB0TDgkdOkHwM&ei=62ZlVqyJAYGz-wGjuK4I&tbm=isch&ved=0ahUKEwjsqp6tzMnJAhWB2T4KHSOcCwEQMwhGKCIwIg" alt="statistic">
          <p class="center-block num"> 100 </p>
          <div class="center-block statistic"> statistic #2</div>
        </div>
        <div class="stat col-md-3 hide">
          <img class="center-block" src="https://www.google.com/imgres?imgurl=https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/64px-Ski_trail_rating_symbol-green_circle.svg.png&imgrefurl=https://en.wikipedia.org/wiki/Piste&h=64&w=64&tbnid=b1-OSFz6e0HHrM:&docid=PkB0TDgkdOkHwM&ei=62ZlVqyJAYGz-wGjuK4I&tbm=isch&ved=0ahUKEwjsqp6tzMnJAhWB2T4KHSOcCwEQMwhGKCIwIg" alt="statistic">
          <p class="center-block num"> 100 </p>
          <div class="center-block statistic"> statistic #3</div>
        </div>
        <div class="stat col-md-3 hide">
          <img class="center-block" src="https://www.google.com/imgres?imgurl=https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/64px-Ski_trail_rating_symbol-green_circle.svg.png&imgrefurl=https://en.wikipedia.org/wiki/Piste&h=64&w=64&tbnid=b1-OSFz6e0HHrM:&docid=PkB0TDgkdOkHwM&ei=62ZlVqyJAYGz-wGjuK4I&tbm=isch&ved=0ahUKEwjsqp6tzMnJAhWB2T4KHSOcCwEQMwhGKCIwIg" alt="statistic">
          <p class="center-block num"> 100 </p>
          <div class="center-block statistic"> statistic #4</div>
        </div>
</div>
<div id="learning-experience"> learning-experience</div>
<div id="success">success </div>


</div>

CSS

#mission, #why-cs, #learning-experience, #success {
  width: 100%;
  height: 300px;
}

#mission {
  background-color: green;
}
#why-cs {
  background-color: orange;
}
#learning-experience {
  background-color: #000;
}
#success {
  background-color: #220000;
}

JavaScript

$(function() {

  autoScroll();
  animateStat();


});

function autoScroll() {
  $('.sub-nav a').click(function (e) {
      e.preventDefault();
      var sectionID = $(this).attr('href');
      alert($(sectionID).offset().top);
      $('html body').animate({
        scrollTop: $(sectionID).offset().top
      }, 1000)
  })
}

function animateStat(){
  var stats = $('#why-cs').offset().top - 200,
      statistic = $('.stat');


  $(window).scroll(function () {
     var delay = 400;

    if ($(window).scrollTop() > stats) {
      $.each(statistic, function () {
          statistic.removeClass('hide');
          statistic.delay(delay).addClass('animated fadeInLeft');
          delay += delay;
      })
    }
    if ($(window).scrollTop() < stats) {
      statistic.removeClass('animated fadeInUp');
    }
  });
}

Answer 1

I've had to change the JS logic quite a lot. You cannot get the offset value of an element that is hidden(.hide) as the browser doesn't have it in the element tree at all, and basically doesn't store any info about it.

Further from that, you were on the right track using each however, you need to take advantage of the this keyword within it so that you apply the rules to that iteration of the loop, instead of all matching classes.

For that reason I just made it display:block and opacity: 0 instead. Here's a JS Fiddle: https://jsfiddle.net/wigster/fe3e36j9/

The new JS:

var $win = $(window);
var $stat = $('.stat'); // Change this to affect your desired element.

$win.on('scroll', function () {
    var scrollTop = $win.scrollTop();

    $stat.each(function () {
        var $self = $(this);
        var prev=$self.offset();
        console.log(scrollTop);
        console.log(prev.top);
        if ( (scrollTop - prev.top) > -300) {
          $self.css('opacity', '1').addClass('animated fadeInLeft ');
        } else {
          console.log('n');
        }

    });

}).scroll();

For future reference I also have this created as a simple go to for animating on scroll: http://trulycode.com/bytes/simple-appear-on-scroll/

Answer 2

You can do it using setTimeout function in each loop like following. Hope this will help you.

$.each(statistic, function (i, item) {
     setTimeout(function(){
        $(item).removeClass('hide');
        $(item).addClass('animated fadeInLeft');
     }, 400*i)           
})

Js Fiddle link: https://jsfiddle.net/8t881403/5/

Update: statistic = $('.stat') selects all element with class stat. So when you add or remove class to statistic all element are get animated at a time. And the delay method only works for numeric CSS modifications. For these reasons your code is not working.