使用时动画数字重复出现

Question

我正在使用 jquery animateNumber ( http://aishek.github.io/jquery-animateNumber/ ) 来制作两个数字的动画。这按预期工作。

我也在用jquery出现(http://morr.github.io/appear.html)

当我在放置数字的部分重新加载网站时，动画效果很好，但是当我将它与出现一起使用时，它会一直重复 4-5 次，然后停在它应该的数字上。

我不知道为什么会这样。

这个问题我做了个小记录

https://drive.google.com/file/d/0B7hawEXeq3fwWmdZdU1qbUwxOGs/view?usp=sharing

这是我控制动画的脚本

 $('#financialNumbers').appear();

        $('#financialNumbers').on('appear', function () {

            $('.timer.result').animateNumber(
              {
                  number: 690,
              }, 1500
            );

            var decimal_places = 1;
            var decimal_factor = decimal_places === 0 ? 1 : Math.pow(10, decimal_places);

            $('.timer.percentage').animateNumber(
             {
                 number: 11.9 * decimal_factor,
                 numberStep: function (now, tween) {
                     var floored_number = Math.floor(now) / decimal_factor,
                         target = $(tween.elem);

                     if (decimal_places > 0) {
                         // force decimal places even if they are 0
                         floored_number = floored_number.toFixed(decimal_places);

                         // replace '.' separator with ','
                         floored_number = floored_number.toString().replace('.', ',');
                     }

                     target.text(floored_number);
                 }
             }, 1500
           );

        });

        $('#financialNumbers').on('disappear', function () {
            $('.timer').text(0);
        });

Answer 1

我使用 jquery isinviewport

修复了它

使用时动画数字重复出现

animate number repeats when using appear

html

javascript

jquery

viewport

jquery-animate