Подсчитайте Анимацию, когда элемент виден для пользователя

Question

У меня проблема, счетная анимация im, использующая теперь несколько элементов, запускается только один раз для первого элемента.

И также пытаюсь установить значение «counting-to» в html. есть ли простой способ загрузить их в js для каждого элемента?

В конце концов, я пытаюсь получить подсчет анимации, начиная с того, как div виден для пользователя, прокручивая вниз. когда его видимый он должен оставаться, как и после анимации один раз.

Только если пользователь прокручивает элемент из видимости, он должен перезагрузиться и начать снова, если его снова увидеть.

Есть ли у кого-нибудь идея, как я могу это решить?

Heres код:

http://jsfiddle.net/drfux88/aJrj4/32/

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

Вы можете добавить класс к элементу после того, как анимация начинается в первый раз, а затем выберите этот элемент с помощью: а не селектор. Например, выбрать анимацию DIV как так:

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

Тогда позже, когда начинается анимация:

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