jQuery自动增减数字的动画效果示例

本文通过一个例子来说明jQuery自动增减数字的动画效果。分享给大家参考，如下：

渲染：

1.HTML:

div class=' up '/div brdiv class=' down '/div 2。JS:

$ (function () {varobj={el: $(')。up ')、max:1000、start :100//增加start} varobj2={el3360 $('的初始值。down’)，max:1000，end33300。down(obj2)})函数up(obj){ var item=obj . El；var num=obj.maxvar start=obj.starttime2=setInterval(函数(){ startif(start num){ start=num；clearInterval(时间2)；} item.text(start) }，1)} function down(obj){ var item=obj . El；var num=obj.maxvar min=obj.endtime 1=SetInterval(function(){ num-；if(nummin){ num=min；Clearinterval (time1)}项目。text (num)}，1)}您可以自己设置每个增量的大小

问题：

1。如果需要用背景图片中的数字替换当前显示的数字，并有上下滚动的效果，该怎么办？背景位置

2。实现问题1的效果后，如果想让最大位数先停止动画，如果后面的位数依次停止，该怎么办？或者当你开始动画时，最后一个数字开始动画，最大的数字最后开始动画。

3。如果数字增加到数千，请在数千之后添加逗号，例如1，000。如何做到这一点？

4。如何用settimeout实现？Settimeout可以求解动画序列，即延时动画

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

关于jQuery的更多信息，请查看本网站专题：《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》。

希望本文对大家的jQuery程序设计有所帮助。