Question

我正在尝试使用jquery技术从数字'1'动画到'100'我已经在网上看过几个地方。它工作正常，但Firefox有一些严重的问题，我知道jQuery的.animate（）作为一个整体并不是最好的。

跨度'＃headline-number'以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，要么只是vanilla javascript？谢谢！

Answer 1

我最终采用这种方法使用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的文本应该匹配。我在这里可以看到动画：http://willguldin.com/one-hundred-ages/

我想为此添加一些缓和，因此当它接近完成时，它会减慢速度，但我认为这已经足够接近我想要的效果了。

在两个数字之间制作动画的方式比.animate（）更高效;

1 个答案: