Question

我想使用jQuery一次使用div div类生成四个.stat。

我原以为我必须使用$.each()方法循环遍历div，以便一次动画一个div，但是它们都会同时生成动画，而不是1乘1。

对于为什么会有任何想法会受到高度赞赏。

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

您可以使用key: 99 Adams, Terry Fakhouri, Fadi key: 82 Adams, Terry Feng, Hanying key: 81 Adams, Terry Fakhouri, Fadi key: 92 Adams, Terry key: 90 Fakhouri, Fadi Feng, Hanying key: 94 Fakhouri, Fadi Feng, Hanying循环中的setTimeout函数执行此操作，如下所示。希望这会对你有所帮助。

each

Js Fiddle链接：https://jsfiddle.net/8t881403/5/

更新： $.each(statistic, function (i, item) { setTimeout(function(){ $(item).removeClass('hide'); $(item).addClass('animated fadeInLeft'); }, 400*i) })选择课程statistic = $('.stat')的所有元素。因此，当您向stat添加或删除类时，所有元素都会一次变为动画。 statistic方法仅适用于数字CSS修改。由于这些原因，您的代码无效。

Answer 2

我必须非常改变JS逻辑。您无法获取隐藏元素的offset值（.hide），因为浏览器根本没有它在元素树中，并且基本上不存储任何信息关于它。

此外，您使用each走在正确的轨道上，但是，您需要利用其中的this关键字，以便将规则应用于循环的迭代，而不是所有匹配的类。

出于这个原因，我只是改为display:block和opacity: 0。这是一个JS小提琴： 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/

一次一个动画元素

2 个答案: