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
);

jquery Animate Number在屏幕上恢复进入

1 个答案: