javascript - jquery Animate Number 在屏幕上重新启动输入

Question

我混合使用 fullpage.js和 animate number.js创建一个小测验。根据整个幻灯片中选择的值，最终幻灯片具有成本估算。

当用户进入最后一张幻灯片时，数字将在 0 - 10000 和 0 - 15000 之间进行动画显示。但是，当用户离开幻灯片并可能更改他们想要的内容时，成本可能会增加，但最后一张幻灯片的数字会变化不会复活。我尝试在用户离开最后一张幻灯片时将值设置为 0，但如果动画仍在运行，则此方法不起作用；如果有效，动画在进入幻灯片时不会再次运行。

<div class="segment_quiz_question">
    <div>£<span class="priceRange11">15,000</span> - £<span class="priceRange12">20,000</span></div>
    <div>£<span class="priceRange11">20,000</span> - £<span class="priceRange12">25,000</span></div>
</div>




$('.segment_quiz_questions').fullpage({
        sectionSelector: '.segment_quiz_question',
        verticalCentered: false,

        onLeave: function (index, nextIndex, direction) {
        if (index == $('.segment_quiz_question').length) {
                $('.priceRange11').text("0");
                $('.priceRange12').text("0");
                $('.priceRange21').text("0");
                $('.priceRange22').text("0");
            };

            var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
            if (nextIndex == $('.segment_quiz_question').length) {
                $('.priceRange11').animateNumber({
                    number: 15000,                            
                    numberStep: comma_separator_number_step
                    }, 2000
                );
                $('.priceRange12').animateNumber({
                    number: 20000,
                    numberStep: comma_separator_number_step
                }, 3000
                );
                $('.priceRange21').animateNumber({
                    number: 20000,
                    numberStep: comma_separator_number_step
                }, 2000
                );
                $('.priceRange22').animateNumber({
                    number: 25000,
                    numberStep: comma_separator_number_step
                }, 3000
                );
           }
      }
});

我基本上希望数字始终从 0 开始动画 - 它们在进入最后一张幻灯片时的值。

Answer 1

我已经使用 .prop("number", "0") 自己修复了这个问题。

我删除了脚本的整个 $('.priceRange11').text("0"); 部分，并添加了 .prop("number", "0") 其余部分如下:

$('.priceRange11').prop("number", "0").animateNumber({
    number: 15000,                            
    numberStep: comma_separator_number_step
    }, 2000
);