我怎么能修复动画速度？

我有以下代码（请参阅下面的代码）。 它的工作原理但我有以下问题。 向下滚动并开始动画时，完成动画需要很长时间（大约4秒钟）。 换句话说，它开始非常慢。

我试图从JS和CSS转换中删除“慢”，但我没有运气，进度条动画停止工作或他们继续做动画非常慢。

代码背后的想法是，当你向下滚动动画开始时它应该具有正常速度。

我怎么能修复这个bug？

谢谢

function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom = docViewTop)); } var IsViewed = false; $(document).scroll(function() { $(".progress div").each(function() { var display = $(this), currentValue = parseInt(display.text()), nextValue = $(this).attr("data-values"), diff = nextValue - currentValue, step = (0 < diff ? 1 : -1); if (nextValue == "0") { $(display).css("padding", "0"); } else { $(display).css("color", "#fff").animate({ "width": nextValue + "%" }, "slow"); } }); }); 

 .progress-bar { background-color: #53dceb; height: 12px; -webkit-transition: width 1.5s ease-in-out; transition: width 1.5s ease-in-out; } 

     
 
 
 
 
Skills
 
 
  
  
 
Number1 30%
 
 
 
 
 
  
 
Number2 100%
 
 
 
 
  
 
Number3 60%
 
 
 
 
  
 
Number4 60%
 
 
 
 
 
  
  
 
Number5 90%
 
 
 
 
  
 
Number6 70%
 
 
 
 
  
 
Number7 90%
 
 
 
 
  
 
Number8 90%
 
 
 
 
 
  
  
 
 Number9 90%
 
 
 
 
  
 
Number10 40%
 
 
 
 
  
 
Number11 50%
 
 
 
 
  
 
number12 60%
 
 
 
 
 
 
     

Answer 1

您在每个滚动事件上绑定动画 – 您需要在再次动画之前检查它是否已经动画化：

 function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } var IsViewed = false; $(document).scroll(function() { // this code is run everytime you scroll console.log('scrolling'); // scroll a little bit and see how many times this is logged - that is how many times you run the code below $(".progress div").each(function() { var display = $(this), currentValue = parseInt(display.text()), nextValue = $(this).attr("data-values"), diff = nextValue - currentValue, step = (0 < diff ? 1 : -1); if (!display.is(':animated')) { // this checks to see if you are currently animating - if you are, you do not want to start the animation again (otherwise you get that slow start you were seeing) if (nextValue == "0") { $(display).css("padding", "0"); } else { $(display).css("color", "#fff").animate({ "width": nextValue + "%" }, "fast"); } } }); }); 

 .progress-bar { background-color: #53dceb; height: 12px; -webkit-transition: width 1.5s ease-in-out; transition: width 1.5s ease-in-out; } 

     
 
 
 
 
Skills
 
 
  
  
 
Number1 30%
 
 
 
 
 
  
 
Number2 100%
 
 
 
 
  
 
Number3 60%
 
 
 
 
  
 
Number4 60%
 
 
 
 
 
  
  
 
Number5 90%
 
 
 
 
  
 
Number6 70%
 
 
 
 
  
 
Number7 90%
 
 
 
 
  
 
Number8 90%
 
 
 
 
 
  
  
 
 Number9 90%
 
 
 
 
  
 
Number10 40%
 
 
 
 
  
 
Number11 50%
 
 
 
 
  
 
number12 60%
 
 
 
 
 
 
 
    

Answer 2

在开始新动画之前，您需要调用.stop() （或finish() ）：

 $(display).css("color", "#fff").stop().animate({ ... 

 function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } var IsViewed = false; $(document).scroll(function() { $(".progress div").each(function() { var display = $(this), currentValue = parseInt(display.text()), nextValue = $(this).attr("data-values"), diff = nextValue - currentValue, step = (0 < diff ? 1 : -1); if (nextValue == "0") { $(display).css("padding", "0"); } else { $(display).css("color", "#fff").stop().animate({ "width": nextValue + "%" }, "slow"); } }); }); 

 .progress-bar { background-color: #53dceb; height: 12px; -webkit-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; } 

     
 
 
 
 
Skills
 
 
  
  
 
Number1 30%
 
 
 
 
 
  
 
Number2 100%
 
 
 
 
  
 
Number3 60%
 
 
 
 
  
 
Number4 60%
 
 
 
 
 
  
  
 
Number5 90%
 
 
 
 
  
 
Number6 70%
 
 
 
 
  
 
Number7 90%
 
 
 
 
  
 
Number8 90%
 
 
 
 
 
  
  
 
 Number9 90%
 
 
 
 
  
 
Number10 40%
 
 
 
 
  
 
Number11 50%
 
 
 
 
  
 
number12 60%