Question

我是JQuery的新手。我在堆栈溢出处从这里得到了这个代码我的想法是在jquery中创建一个数字动画。现在代码适用于一个数字动画但是只要我用第二个脚本添加第二个动画，第一个数字就不会生成动画。是否存在功能冲突？谢谢。这是Js脚本

<script>
$(function () {
    var ele = $('#num1');
    var clr = null;
    var rand = 0;//Starting Point
    (loop = function () {
        clearTimeout(clr);
        (inloop = function () {
            ele.html(rand += 1);
            if (!(rand % 60)) {  //20 is the Finished Value
                return;
            }
            clr = setTimeout(inloop, 32); //SPEED OF ANIMATION
        })();
        //  setTimeout(loop, 2500); //Increment Loop TIme
    })();
});

和html

     <div id="num1"></div>

现在我将＃num2的第二个脚本添加到＃num1并使用div num2。但问题出现了。谢谢。请帮我。非常感兴趣。

Answer 1

使用var关键字声明循环和inloop变量以解决此问题。这将使变量局部变量在当前它们处于全局范围内（因为您没有使用var）。

$(function () {
var ele = $('#num1');
var clr = null;
var rand = 0;//Starting Point
var loop;
(loop = function () {
    var inloop;
    clearTimeout(clr);
    (inloop = function () {
        ele.html(rand += 1);
        if (!(rand % 60)) {  //20 is the Finished Value
            return;
        }
        clr = setTimeout(inloop, 32); //SPEED OF ANIMATION
    })();
    //  setTimeout(loop, 2500); //Increment Loop TIme
})();
});

Answer 2

这是你的代码，只清理了一点并变成了一个函数，因此它可以多次使用。我看到了几个答案，但我认为你可以看看这个，并了解你可以做些什么来使代码更清晰，更易于使用，更可靠。

http://jsfiddle.net/6VHYT/7/

$(function () {
    // it is bad to copy/paste code, so lets put a function here
    function risingNumber(start,end,jqstr,speed){
        // speed is optional, others required
        var clr = null;
        var ele = $(jqstr);
        var rand = start;//Starting Point
        if (arguments.length<3) throw "risingNumber needs 3 params";
        // note new functions to replace potentially confusing use of inline
        // and use of var to make a local, not global
        function loop() {
            clearTimeout(clr);
            function inloop() {
                ele.html(rand += 1);
                if (!(rand < end)) {  //end is the Finished Value
                    return;
                }
                clr = setTimeout(inloop, (speed || 32)); //SPEED OF ANIMATION
            };
            inloop();
            //  setTimeout(loop, 2500); //Increment Loop TIme
        };
        loop();
    }
    risingNumber(0,60,'#num1');
    risingNumber(0,100,'#num2');

});

Answer 3

这是一个可以帮助你的小提琴：http://jsfiddle.net/gQeeR/

$(function () {
    function loop(selector) {
        var count = 0;
        var interval = setInterval(function() {
            $(selector).html(count++);
            if (!(count % 60))  {
                $(selector).html(count);
                clearInterval(interval);
            }
        }, 32);
    }
    loop('#num1');
    loop('#num2');
});

不能做数字增量动画

3 个答案: