JQuery实现数字改变的动画效果--可用来做计数器

之前主管让我用javascript做个计数器，从网上搜了搜，找不到合适的，就想着自己做一个，因为要求是动态的，我就想到了应该是位置的变化，想到之前用过的JQuery，把里边的效果全试了试，最后选用了animate自定义，代码如下：

< html >
< head >
     < title > testAnimate </ title >
     < script  type ="text/javascript" >
         function  changeNum(n) {                                                                  // n设为想要改成的数字
            $( function  () {
                $( " counter " ).animate({ top:  ' +=20px ' , opacity:  ' 0 '  },  " slow " ,  function  () {      // 让数字向下移动并消失，top为元素距网页顶部距离，opacity为透明度，值为0~1
                    document.getElementById( " counter " ).innerHTML  =  n;                            // 等数字消失后变为n，网页里有id为counter的一个span元素，这段代码必须放在animate里边，否则数字消失之前它的数值就改变了
                })
                .animate({ top:  ' -=40px '  },  " slow " )                                              // 数字n跳至原来位置的上方
                .animate({ top:  ' +=20px ' , opacity:  ' 1 '  },  " slow " );                               // 数字n出现并落至数字原来位置，opacity为0时是对象完全透明，就是消失，值为1时是完全显现
            });
        }
     </ script >
</ head >
< body >
     < span  id ="counter" > 1 </ span >
</ body >
</ html >

我只是新手，JQuery的原理不懂，只是效果实现了，把我的思路写一下，第一次用博客园，不怎么会使，有错误请指正，谢谢

最后

以上就是年轻冬天为你收集整理的JQuery实现数字改变的动画效果--可用来做计数器的全部内容，希望文章能够帮你解决JQuery实现数字改变的动画效果--可用来做计数器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。