console
$('.count').each(function () {
(function rec(self, cnt) {
$(self).prop('Counter',0).animate({
Counter: cnt
}, {
duration: 2000,
easing: 'swing',
step: function (now) {
$(self).text(Math.ceil(now));
},
complete : function() {
setTimeout(function() {
rec(self, cnt);
}, 2000);
}
});
}(this, $(this).text()));
});
/*
$('.count').each(function anim() {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 2000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
},
complete: function(){
$(this).css('counter',0);
setTimeout(anim.bind(this),1000);
}
});
});
*/
<div class="counter inner">
<ul>
<li>
<h1 class="count">35</h1>
<p>Years</p>
</li>
<li>
<h1 class="count">60</h1>
<p>Employees</p>
</li>
</ul>
</div>
ul {
list-style-type:none;
}
li {
margin-bottom: 50px;
}
li h1 {
font-family: impact;
font-size: 60px;
font-weight:normal;
margin: 0;
padding: 0;
}
li p {
display: block;
margin-top: -2px;
font-family: arial;
font-size: 12px;
color: #999;
}