jQuery实现数字自动增加或者减少的动画效果示例

本文实例讲述了jQuery实现数字自动增加或者减少的动画效果。分享给大家供大家参考，具体如下：

效果图：

1.HTML：

<div class="up"></div>
<br>
<div class="down"></div>

2.JS：

$(function(){
 var obj={
 el:$(".up"),
 max:1000,
 start:100//增加开始的初始值
 }
 var obj2={
 el:$(".down"),
 max:1000,
 end:100//减少到最小的值
 }
 up(obj);
 down(obj2)
})
function up(obj){
 var item=obj.el;
 var num=obj.max;
 var start=obj.start;
 time2=setInterval(function(){
 start++;
 if(start>num){
 start=num;
 clearInterval(time2);
 }
 item.text(start)
 },1)
}
function down(obj){
 var item=obj.el;
 var num=obj.max;
 var min=obj.end;
 time1=setInterval(function(){
 num--;
 if(num<min){
 num=min;
 clearInterval(time1)
 }
 item.text(num)
 },1)
}

可以自行设定每次增加的大小

问题：

1。要是需要用背景图片中的数字替换当前显示的数字，并且有上下滚动的效果怎么做？     background-position

2。实现了问题1的效果之后，如果要最大的位数最先停止动画，后面的位数依次停止怎么做？或者开始动画的时候，最后一位数开始动画，最大的位数最后开始动画怎么做？

3。如果数字增加到千的时候，在千位之后加逗号，例如：1，000。这又怎么做？

4。怎样用settimeout来实现？settimeout可以解决动画先后顺序，即延迟动画

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。