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 { } }); });
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
Post a Comment