Javascript 在两个'；它的性能比.animate（）更高；

我正在尝试使用jquery技术将数字“1”设置为“100”，我在网上见过好几个地方。它工作正常，但是Firefox在这方面有一些严重的问题，我知道jQuery的.animate（）整体上并不是最好的

跨度“#标题数字”以1开头，这就是为什么年龄范围从2开始

function incrementNumber(number) {
    if (number.length) {

        number.addClass('is-visible'); // Triggers 500ms opacity transition in my css

        setTimeout( function(){
            $({ages: 2}).animate({ages: 100}, {
              duration: 1500,
              easing:'swing',
              step: function() {
                  number.text(Math.round(this.ages));
              }
            });
        }, 510);
    }
}

 incrementNumber($('#headline-number'));

---

是否有其他技术可以实现这一点？要么使用jQuery，要么只是普通的javascript？谢谢

我最终采用了这种方法，即使用setTimeout，递增数字，并在到达某一点时清除它

function incrementNumber(numberValue, number) {
    if(numberValue == 100) {
        clearTimeout(numberAnimation);
        return;
    }

    numberValue++

    if (numberValue > number.text()) {
        number.text(numberValue);
    }

    var numberAnimation = setTimeout(function() {
        incrementNumber(numberValue, number);
    }, 10);
}

在本例中，

number

是DOM中的选择器，

numberValue

是动画的起始编号。选择器的文本和

numberValue

应该匹配。我使用的动画可以在这里看到：

---

我想给它添加一些缓和，这样当它接近尾声时，速度会减慢，但我认为这已经足够接近我想要的效果了

我自己从来没有试过，但试一下吧。听起来它可能会在可用的地方使用CSS3转换。你真的能像那样设置两个内容的动画吗？是的，你可以在jQuery中设置值的动画。这有点不同，但这是我在中看到的一篇文章：我的意思是，这将触发一堆并定期替换文本，但我不认为这是动画，我的意思是显示介于两者之间的内容。当将白色动画设置为黑色时，我们会看到灰色，但“A”和“B”之间的中间值是什么？为什么“动画”而不仅仅是计数和显示？你在页面上的最终目标是什么？看看tweenmax，它有各种不同的评测，性能非常出色。我在一个生产站点上使用了它，它可以完美地工作，同时将两个不同的值从小整数减少到数百万，即使在移动设备上也是如此。