Question

我有一个问题，即时使用多个元素的计数动画，只对第一个元素开始一次。

我也试图在html中设置“count-to”值。是否有一种简单的方法可以将它们加载到每个元素的js中？

最后，我试图通过向下滚动来为用户显示div时启动计数动画。当它可见时，它应该在运行动画之后保持不变。

只有当用户将元素从可见性中滚出时，如果它再次可见，它应该重置并重新开始。

有谁知道如何解决这个问题？

继承人代码：

function animateValue(id, start, end, duration) {
    var obj = document.getElementById(id);
    var range = end - start;
    var minTimer = 50;
    var stepTime = Math.abs(Math.floor(duration / range));
    stepTime = Math.max(stepTime, minTimer);
    var startTime = new Date().getTime();
    var endTime = startTime + duration;
    var timer;

    function run() {
        var now = new Date().getTime();
        var remaining = Math.max((endTime - now) / duration, 0);
        var value = Math.round(end - (remaining * range));
        obj.innerHTML = value;
        if (value == end) {
            clearInterval(timer);
        }
    }

    timer = setInterval(run, stepTime);
    run();
}

animateValue("value", 0, 75, 2000);

Answer 1

一旦动画第一次启动，您就可以向元素添加一个类，然后使用：not selector选择该元素。例如，像这样选择动画div：

$('.animation_div:not(.animating)');

然后在动画开始时：

$('.animation_div').addClass('animating');

当元素对用户可见时，向上计数动画

1 个答案: