Анимация элементов по одному

Question

Я хотел был бы сделать четыре div с классом .stat div анимировать один за раз с помощью jQuery.

Я думал, что я должен был использовать метод $.each() Переберите дивы для того, чтобы оживить их по одному за раз, однако все они анимировать в то же время, вместо 1 на 1.

Любые мысли из чего следует с большой благодарностью.

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

Мне пришлось много раз менять логику JS. Вы не можете получить значение offset элемента, который скрыт (.hide), поскольку браузер не имеет его в дереве элементов вообще и в основном не хранит никакой информации об этом.

Далее из того, что вы на правильном пути, используя each однако, вы должны воспользоваться this ключевым словом в нем так, чтобы применить правила к этой итерации цикла, из всех соответствующих классов.

По этой причине я только что сделал это display:block и opacity: 0. Вот JS Fiddle: https://jsfiddle.net/wigster/fe3e36j9/

Новые 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(); 

На будущее я и это создало в качестве простого пути к анимировать на свитке: http://trulycode.com/bytes/simple-appear-on-scroll/

Answer 2

Вы можете сделать он использует функцию setTimeout в each петле, как показано ниже. Надеюсь, что это поможет вам.

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

Js Fiddle ссылка: https://jsfiddle.net/8t881403/5/

Обновление:statistic = $('.stat') выбирает все элементы с классом stat. Поэтому, когда вы добавляете или удаляете класс до statistic, каждый элемент получает анимацию за раз. И метод delay работает только для числовых модификаций CSS. По этим причинам ваш код не работает.