如何逐一计数 - Jquery.

Question

我想一个接一个地制作这个计数器。例如：计数 1 结束计数 计数 2 将开始计数，如果计数 2 结束计数 3 将开始计数。如果所有 4 个计数再次完成，则从 Count1 开始循环。

$('.count').each(function anim() {
$(this).prop('Counter',0).animate({
    Counter: $(this).text()
}, {
    duration: 2000,
    easing: 'swing',
    step: function (now) {
        $(this).text(Math.ceil(now));
    },
    complete: function(){
        $(this).css('counter',0);
        setTimeout(anim.bind(this),5000);
    }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="counter inner">
        <ul>
          <!--Count1-->
          <li>
              <h5 class="count count1">35</h5>
              <p>Years</p>
          </li>
          <!--Count2-->
          <li>
              <h5 class="count count2">150</h5>
              <p>Employees</p>
          </li>
          <!--Count3-->
          <li>
              <h5 class="count count3">15</h5>
              <p>Branches</p>
          </li>
          <!--Count4-->
          <li>
              <h5 class="count count4">1500</h5>
              <p>Clients</p>
          </li>
        </ul>
    </div>

Answer 1

$('.count').eq(0).each(anim);
function anim() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 2000,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now));
    },
    complete: function() {
      if($(this).parent().next().prop("tagName") == "LI"){
        $(this).parent().next().find(".count").each(anim);
      }
      else{
        $('.count').eq(0).each(anim);
      }
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="counter inner">
  <ul>
    <!--Count1-->
    <li>
      <h5 class="count count1">35</h5>
      <p>Years</p>
    </li>
    <!--Count2-->
    <li>
      <h5 class="count count2">150</h5>
      <p>Employees</p>
    </li>
    <!--Count3-->
    <li>
      <h5 class="count count3">15</h5>
      <p>Branches</p>
    </li>
    <!--Count4-->
    <li>
      <h5 class="count count4">1500</h5>
      <p>Clients</p>
    </li>
  </ul>
</div>

触发器函数anim在第一个count元素上，然后在complete函数中触发下一个。