用JQ去实现数字动态增加动画

  • Post author:
  • Post category:其他





先说下原理吧:




就是设置就一个定时器去累加,然后到了指定数字就清除定时器。


下面直接贴上代码:

//jq实现数字动态增加动画
function starNum(id,value) {
    var temp = $("#"+id);
    temp.animate({count: value}, {
        duration: 2000,
        step: function() {
            temp.text(String(this.count));
            console.log(this.count);
        }
    });
}

说明: id是绑定的元素id,value是指定的数字。duration是动画时间。
这里有一个坑就是temp.text(String(this.count));转化为整数的时候永远都是小于的。
比如value是20,但实际跳到19就停了,因为temp.text(String(this.count))转化的时候,
我输出了count的值是一个小数。

哪位知道可以指点下,互相学习、进步。。。谢谢!



版权声明:本文为qq_32486147原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。