启动第二个 JQuery 计数器，如果第一个完成？

Question

我有三个 jQuery 计数器，第一个计数到 150。当第一个计数时，其他两个应该是静态的，只显示值 200（第二个计数器）和 300（第三个计数器）。

就在第一个计数器达到 150 的那一刻，第二个应该跳入并从 200 开始计数并在 300 处缓和。

在发生这种情况时，第一个应该是静态的 150，第三个应该是 300。

因此，如果第二个达到 300，则第三个应该一直计数到 400。第二个在达到 300 后应该是静态的。

$.easing.easeOutExpo = function(x, t, b, c, d) {
  return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
}

$('.counter').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');

  $({
    countNum: $this.text()
  }).animate({
      countNum: countTo
    },

    {

      duration: 8000,
      easing: 'easeOutExpo',
      step: function() {
        $this.text(Math.floor(this.countNum));
      },
      complete: function() {
        $this.text(this.countNum);
        //alert('finished');
      }

    });



});

body {
  background-color: #F46A6A;
  color: #fff;
  max-width: 800px;
  margin: 100px auto 0;
  text-align: center;
  display: table;
}

.counter {
  display: table-cell;
  margin: 1.5%;
  font-size: 50px;
  background-color: #FF6F6F;
  width: 200px;
  border-radius: 50%;
  height: 200px;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

<div class="counter" data-count="150">0</div>
<div class="counter" data-count="85">0</div>
<div class="counter" data-count="2200">0</div>

Answer 1

你的意思是这样的？

$.easing.easeOutExpo = function(x, t, b, c, d) {
  return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
}
var cnt = 0;

function count() {
  var $counter = $('.counter').eq(cnt),
    countTo = $counter.attr('data-count'),
    duration = $counter.attr('data-duration')*1000;

  $({
    countNum: $counter.text()
  }).animate({
      countNum: countTo
    },

    {

      duration: duration,
      easing: 'easeOutExpo',
      step: function() {
        $counter.text(Math.floor(this.countNum));
      },
      complete: function() {
        $counter.text(this.countNum);
        cnt++;
        if (cnt < $('.counter').length) {
          // replace the next counter's data-count here if you want to continue instead
          count();
        }
      }

    });

}
count()

body {
  background-color: #F46A6A;
  color: #fff;
  max-width: 800px;
  margin: 100px auto 0;
  text-align: center;
  display: table;
}

.counter {
  display: table-cell;
  margin: 1.5%;
  font-size: 50px;
  background-color: #FF6F6F;
  width: 200px;
  border-radius: 50%;
  height: 200px;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="counter" id="cnt0" data-count="150" data-duration="10">0</div>
<div class="counter" id="cnt1" data-count="85"  data-duration="20">0</div>
<div class="counter" id="cnt2" data-count="2200" data-duration="5">0</div>