Jquery 一次为一个元素设置动画

我想用

.stat

div类制作四个

div

，使用jQuery一次制作一个动画

我在想，我必须使用

$.each（）

方法在div中循环，以便一次为它们设置一个动画，但是它们都同时设置动画，而不是一个接一个地设置动画

如果您想知道原因，我们将不胜感激

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>

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

$（函数（）{
autoScroll（）；
animateStat（）；
});
函数autoScroll（）{
$（'子导航a'）。单击（功能（e）{
e、 预防默认值（）；
var sectionID=$（this.attr（'href'）；
警报（$（sectionID）.offset（）.top）；
$（'html正文'）。设置动画({
scrollTop:$（sectionID）.offset（）.top
}, 1000)
})
}
函数animateStat（）{
var stats=$（'#为什么是cs'）.offset（）.top-200，
统计数据=$（'.stat'）；
$（窗口）。滚动（函数（）{
无功延迟=400；
如果（$（窗口）.scrollTop（）>stats）{
$.each（统计、函数（）{
statistic.removeClass（'hide'）；
statistic.delay（delay）.addClass（'animated fadeInLeft'）；
延迟+=延迟；
})
}
if（$（窗口）.scrollTop（）

我不得不大量更改JS逻辑。 您无法获取隐藏的元素（

.hide

）的

偏移量

值，因为浏览器在元素树中根本没有该值，并且基本上不存储有关该值的任何信息

除此之外，使用

每个

都是正确的，但是，您需要利用其中的

这个

关键字，以便将规则应用于循环的迭代，而不是所有匹配的类

出于这个原因，我只是将其改为

display:block

和

opacity:0

。 这是一把JS小提琴：

新的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();

作为将来的参考，我还创建了一个简单的滚动动画：

---

您可以使用

每个

循环中的

设置超时

函数来完成，如下所示。希望这对你有帮助

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

链接：

更新：

statistic=$（'.stat'）

选择类为

stat

的所有元素。因此，当您向

统计添加或删除类时，所有元素都会一次设置动画。
而
delay
方法仅适用于数字CSS修改。由于这些原因，您的代码无法正常工作。
工作得非常好！你能给我解释一下我的代码出了什么问题以及为什么你的代码能工作吗？这是一种可怕的方式？！如果涉及到任何其他JS，setTimeout会让你陷入所有类型的麻烦。在这种情况下，没有其他的
JS
涉及@AlexanderWigmore@Azim？Hi@Web-Dev。对下面的两个答案有什么进一步的想法吗？
$.each(statistic, function (i, item) {
     setTimeout(function(){
        $(item).removeClass('hide');
        $(item).addClass('animated fadeInLeft');
     }, 400*i)           
})