Question

所以当我滚动到一个元素时，我正在使用这个jQuery plugin计数到目标数字。

我想要的只是当数字完成计数时，在它之前添加 + ，我该怎么办？

注意： plugin包含一个名为onComplete()的回调函数，但我不知道如何在此脚本中使用它...

我心中的例子：

当数字仍然计数时： 420 客户

数字已完成计数： + 5000 客户

以下是我当前脚本的一个工作示例：

function isScrolledIntoView(el) {
  var elemTop = el.getBoundingClientRect().top;
  var elemBottom = el.getBoundingClientRect().bottom;

  var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
  return isVisible;
}

$(window).on('scroll', function() {
  if (isScrolledIntoView(document.getElementById('counters'))) {
    $('.ace-counter-number').countTo();

    // Unbind scroll event
    $(window).off('scroll');
  }
});

.justaddheight {
  height: 500px;
}

.text-center {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script>

<section class="justaddheight text-center about">
  <h1>SCROLL DOWN</h1>
  <p>First, Scroll Now</p>
  <p>Second, try Again but wait for few seconds before scroll to identify.</p>
</section>
<section class="justaddheight service">

</section>
<section class="justaddheight portfolio">

</section>
<section id="counters">
  <div class="ace-overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-briefcase to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="89" data-speed="5000" data-refresh-interval="100">89</span>
          <span class="ace-counter-label">Finished projects</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-code to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="2343409" data-speed="5000" data-refresh-interval="50">2343409</span>
          <span class="ace-counter-label">Templates</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-cup to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="1302" data-speed="5000" data-refresh-interval="50">1302</span>
          <span class="ace-counter-label">Cup of coffees</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-people to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="52" data-speed="5000" data-refresh-interval="50">52</span>
          <span class="ace-counter-label">Happy clients</span>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

您正在寻找的是：

.countTo({
  onComplete: function() {
    $(this).prepend("+");
  }
});

$.prepend() 在目标元素之前插入内容， this 定位countTo循环中的每个元素（在这种情况$('.ace-counter-number')）。

function isScrolledIntoView(el) {
  var elemTop = el.getBoundingClientRect().top;
  var elemBottom = el.getBoundingClientRect().bottom;

  var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
  return isVisible;
}

$(window).on('scroll', function() {
  if (isScrolledIntoView(document.getElementById('counters'))) {
    $('.ace-counter-number').countTo({
      onComplete: function() {
        $(this).prepend("+");
      }
    });

    // Unbind scroll event
    $(window).off('scroll');
  }
});

.justaddheight {
  height: 500px;
}

.text-center {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script>

<section class="justaddheight text-center about">
  <h1>SCROLL DOWN</h1>
  <p>First, Scroll Now</p>
  <p>Second, try Again but wait for few seconds before scroll to identify.</p>
</section>
<section class="justaddheight service">

</section>
<section class="justaddheight portfolio">

</section>
<section id="counters">
  <div class="ace-overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-briefcase to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="89" data-speed="5000" data-refresh-interval="100">89</span>
          <span class="ace-counter-label">Finished projects</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-code to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="2343409" data-speed="5000" data-refresh-interval="50">2343409</span>
          <span class="ace-counter-label">Templates</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-cup to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="1302" data-speed="5000" data-refresh-interval="50">1302</span>
          <span class="ace-counter-label">Cup of coffees</span>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="ace-counter to-animate">
          <i class="ace-counter-icon icon-people to-animate-2"></i>
          <span class="ace-counter-number js-counter" data-from="0" data-to="52" data-speed="5000" data-refresh-interval="50">52</span>
          <span class="ace-counter-label">Happy clients</span>
        </div>
      </div>
    </div>
  </div>
</section>

希望这有帮助！：）

如何在jquery countTo

1 个答案: