简单的jQuery计数器，具有缓动或平滑动画

Question

我创建了一些有趣的事实小片段。我希望通过计数器增量使数字显示平滑。我不知道如何在jQuery中做到这一点。

我搜索了google和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%;
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
	margin-right: 2%;
	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%;
    	position: relative;
    	display:inline;
    	display: inline-block;
    	float: left;
    	margin-right: 2%;
    	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>