简单的jQuery计数器具有轻松或平滑的动画 [英] Simple jQuery counter with easing or smooth animation
本文介绍了简单的jQuery计数器具有轻松或平滑的动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一些有趣的事实，如小片段.我想让数字随着计数器的增加而平滑显示.我不知道如何在jQuery中做到这一点.
I have created small snippets like fun facts. I want to make the number show smooth with counter increment. I don't have any idea on how to do it in jQuery.
我已经搜索了google和stackoverflow，但是找不到仅用几行jQuery就能实现此功能的脚本.
I have searched the google and stackoverflow but can't find any script which does this functionality with just few lines of jQuery.
这是我的HTML，请帮助我为代码段中的有趣事实数字添加jQuery计数器效果.
Here is my HTML, Help me adding jQuery counter effects for fun fact numbers in the snippet.
@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>
推荐答案
因此，您希望数字在页面加载时从零增加吗?这是一种方法.我使数字朝目标值渐近增长.
So you want the numbers to grow from zero on page load? Here'es one way. I made the numbers grow asymptotically towards the target value.
如果您希望数字增长变慢，可以增加比例.
If you want the numbers to grow slower you can increase the scale.
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>
这篇关于简单的jQuery计数器具有轻松或平滑的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
