如何在jQuery中使用onComplete（）函數countTo

Question

所以我使用jQuery plugin這是計數到一個目標數字，當我滾動到一個元素。

我想要的全部是當數字完成計數時，加上+之前，我該怎麼辦呢？

注：的plugin包含一個名爲onComplete()一個回調函數，但我不知道如何在這個腳本中使用它...什麼是在我的腦海

例子：

當數是仍然計數： 客戶

數成品計數：+客戶

這裏是我當前腳本的工作示例：

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>

希望這有助於！ :)