簡單的jQuery計數器，具有緩動或平滑動畫

Question

我創建了一些有趣的事實小片段。我想讓數字顯示順利增加計數器。我不知道如何在jQuery中做到這一點。

我已經搜索了谷歌和stackoverflow，但無法找到任何腳本，只有幾行jQuery的功能。

這裏是我的HTML，幫助我添加jQuery計數器效果的有趣的事實數字在片段。

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); 
 

 

 
.container { 
 
    max-width: 1200px !important; 
 
    margin: 100px auto; 
 
    font-family: "Montserrat"; 
 
} 
 

 
.container { 
 
    box-sizing: border-box; 
 
    margin-left: auto !important; 
 
    margin-right: auto !important; 
 
} 
 

 
/*-=-=-=-=-=-=-=-=-=-*/ 
 
/* Column Grids */ 
 
/*-=-=-=-=-=-=-=-=-= */ 
 

 
.col_fourth { 
 
    background-color: #f1f1f1; 
 
    width: 23.5%; 
 
\t position: relative; 
 
\t display:inline; 
 
\t display: inline-block; 
 
\t float: left; 
 
\t margin-right: 2%; 
 
\t margin-bottom: 20px; 
 
} 
 
.end { margin-right: 0 !important; } 
 

 
/*-=-=-=-=-=-=-=-=-=-*/ 
 
/* Style column 1 */ 
 
/*-=-=-=-=-=-=-=-=-= */ 
 

 
.at-funfact-wrap {background-color: #f1f1f1; padding: 40px 15px; text-align:center;} 
 

 
.at-funfact-wrap .at-funfact { padding: 0;} 
 

 
.at-funfact { 
 
    display:inline-block; 
 
    position:relative; 
 
    padding: 20px 0; 
 
    text-align: center; 
 
} 
 

 
.at-funfact-wrap .at-funfact .funfact-number { 
 
    display: block; 
 
    font-weight: bold; 
 
    line-height: 1; 
 
    margin-bottom: 15px; 
 
    font-size: 60px; 
 
} 
 
.at-funfact-wrap .at-funfact .funfact-number-title { 
 
    margin: 0; 
 
    text-transform: uppercase; 
 
    font-weight: 400; 
 
    letter-spacing: 2px; 
 
    font-size: 14px; 
 
}

<div class="container"> 
 
    <div class="col_fourth"> 
 
     <div class="at-funfact-wrap"> 
 
      <div class="at-funfact"> 
 
       <span data-number="78" class="funfact-number">78</span> 
 
       <h5 style="font-size: 12px; color: #000000" class="funfact-number-title">PORTFOLIO WORKED</h5> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="col_fourth"> 
 
     <div class="at-funfact-wrap"> 
 
      <div class="at-funfact"> 
 
       <span data-number="97" class="funfact-number">97</span> 
 
       <h5 style="font-size: 12px; color: #000000" class="funfact-number-title">AWARD WON</h5> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="col_fourth"> 
 
     <div class="at-funfact-wrap"> 
 
      <div class="at-funfact"> 
 
       <span data-number="35" class="funfact-number">35%</span> 
 
       <h5 class="funfact-number-title">CUPS OF COFFEE</h5> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="col_fourth end"> 
 
     <div class="at-funfact-wrap"> 
 
      <div class="at-funfact"> 
 
       <span data-number="130" class="funfact-number">130+</span> 
 
       <h5 class="funfact-number-title">HOME DEMO</h5> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

所以，你要的數字從零頁面加載成長？這是一種方法。我使得這些數字漸漸趨於目標值。

如果您希望數字增長較慢，您可以增加比例。

jQuery('.funfact-number').each(function() { 
 
     var $this = jQuery(this); 
 
     var parts = $this.text().match(/^(\d+)(.*)/); 
 
     if (parts.length < 2) return; 
 
     
 
     var scale = 20; 
 
     var delay = 50; 
 
     var end = 0+parts[1]; 
 
     var next = 0; 
 
     var suffix = parts[2]; 
 
     
 
     var runUp = function() { 
 
      var show = Math.ceil(next); 
 
      $this.text(''+show+suffix); 
 
      if (show == end) return; 
 
      next = next + (end - next)/scale; 
 
      window.setTimeout(runUp, delay); 
 
     } 
 
     runUp(); 
 
    });

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); 
 

 

 
    .container { 
 
     max-width: 1200px !important; 
 
     margin: 100px auto; 
 
     font-family: "Montserrat"; 
 
    } 
 

 
    .container { 
 
     box-sizing: border-box; 
 
     margin-left: auto !important; 
 
     margin-right: auto !important; 
 
    } 
 

 
    /*-=-=-=-=-=-=-=-=-=-*/ 
 
    /* Column Grids */ 
 
    /*-=-=-=-=-=-=-=-=-= */ 
 

 
    .col_fourth { 
 
     background-color: #f1f1f1; 
 
     width: 23.5%; 
 
    \t position: relative; 
 
    \t display:inline; 
 
    \t display: inline-block; 
 
    \t float: left; 
 
    \t margin-right: 2%; 
 
    \t margin-bottom: 20px; 
 
    } 
 
    .end { margin-right: 0 !important; } 
 

 
    /*-=-=-=-=-=-=-=-=-=-*/ 
 
    /* Style column 1 */ 
 
    /*-=-=-=-=-=-=-=-=-= */ 
 

 
    .at-funfact-wrap {background-color: #f1f1f1; padding: 40px 15px; text-align:center;} 
 

 
    .at-funfact-wrap .at-funfact { padding: 0;} 
 

 
    .at-funfact { 
 
     display:inline-block; 
 
     position:relative; 
 
     padding: 20px 0; 
 
     text-align: center; 
 
    } 
 

 
    .at-funfact-wrap .at-funfact .funfact-number { 
 
     display: block; 
 
     font-weight: bold; 
 
     line-height: 1; 
 
     margin-bottom: 15px; 
 
     font-size: 60px; 
 
    } 
 
    .at-funfact-wrap .at-funfact .funfact-number-title { 
 
     margin: 0; 
 
     text-transform: uppercase; 
 
     font-weight: 400; 
 
     letter-spacing: 2px; 
 
     font-size: 14px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
     <div class="col_fourth"> 
 
      <div class="at-funfact-wrap"> 
 
       <div class="at-funfact"> 
 
        <span data-number="78" class="funfact-number">78</span> 
 
        <h5 style="font-size: 12px; color: #000000" class="funfact-number-title">PORTFOLIO WORKED</h5> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col_fourth"> 
 
      <div class="at-funfact-wrap"> 
 
       <div class="at-funfact"> 
 
        <span data-number="97" class="funfact-number">97</span> 
 
        <h5 style="font-size: 12px; color: #000000" class="funfact-number-title">AWARD WON</h5> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col_fourth"> 
 
      <div class="at-funfact-wrap"> 
 
       <div class="at-funfact"> 
 
        <span data-number="35" class="funfact-number">35%</span> 
 
        <h5 class="funfact-number-title">CUPS OF COFFEE</h5> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col_fourth end"> 
 
      <div class="at-funfact-wrap"> 
 
       <div class="at-funfact"> 
 
        <span data-number="130" class="funfact-number">130+</span> 
 
        <h5 class="funfact-number-title">HOME DEMO</h5> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>