Анимация продолжается после того, как она была вызвана прокруткой

Question

Я сделал гистограмму только с CSS и анимацию от низкого до высокого, что хорошо работает, однако я хочу запускать только при срабатывании прокрутки. Как-то анимация после срабатывания прокрутки не останавливается, она продолжает работать. Посмотрите в элемент проверки последний бар.

JQuery

// Bar Chart Animation 
    function barChart(){ 
     $("#demographicsBars li .bar").each(function(key, bar) { 
     var percentage = $(this).data('percentage'); 

     $(this).animate({ 
      'height' : percentage + '%' 
     }, 1000, function() { 
      $('.viewerDemographics #demographicsBars li .bar').css('overflow','inherit'); 
     }); 
     }); 
    }; 

// Scroll Call Animation 

    $(window).scroll(function() { 
     $('.viewerDemographics').each(function() { 
      var imagePos = $(this).offset().top; 
      var imageHeight = $(this).height(); 
      var topOfWindow = $(window).scrollTop(); 

      if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) { 

       barChart(); 

      } else { 


      } 
     }); 
    }); 

jsfiddle

Answer 1

Это потому, что вы просите его.

http://jsfiddle.net/g6r1vngh/1/

Скажите JS не было обращено

// Bar Chart Animation 
var barChartDrawn = false; 

Установите его в верно, когда речь идет

function barChart(){ 
    barChartDrawn = true; 

Не делать какие-либо из этих расчетов, или запустить если это правда

$(window).scroll(function() { 
    if (barChartDrawn) return;