javascript - Animation continues after once trigged by scroll -


i made bar chart css , animation low works well, want run when trigged scroll. somehow animation after trigged scroll not stop, keeps running. in inspect element latest bar.

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

it's because you're asking to.

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

tell js hasn't been drawn

// bar chart animation var barchartdrawn = false; 

set true when runs

function barchart(){     barchartdrawn = true; 

don't of calculations, or run function, if it's true

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

Comments

Popular posts from this blog

c# - Better 64-bit byte array hash -

webrtc - Which ICE candidate am I using and why? -

php - Zend Framework / Skeleton-Application / Composer install issue -