Javascript 滚动时执行动画

我有带引导的进度条，这是html：

$（“.progress bar”）。每个（函数（）{//。每个（函数（i，项）也可以工作！
var progressBar=$（这个）；//$（这个）也可以
制作动画({
宽度：progressBar.data（'width'）+'%
}, 1500);
})；

请向下滚动
关于进展357/487
失败30/487

这里有一些东西：

Bootply：

Jquery：

$(function(){
  $(window).scroll(function(){
    $(".progress-bar:not(.animated)").each(function(){
      if ($(this).is(':visible')) {
                var progressBar = $(this); // $(this) would work too
                progressBar.animate({
                    width: progressBar.data('width') + '%'
                }, 1500);
                progressBar.addClass('animated');
      }
    });
  }); 
}); 

片段

$（函数（）{
$（窗口）。滚动（函数（）{
$（“.progress bar:未（.animated）”）。每个（函数（）{
如果（$（this）.is（':visible'））{
var progressBar=$（这个）；//$（这个）也可以
制作动画({
宽度：progressBar.data（'width'）+'%
}, 1500);
progressBar.addClass（“动画”）；
}
});
}); 
})；

请向下滚动
关于进展357/487
失败30/487

这是可行的，但是每个卷轴的工作量可能会影响性能。我完全同意你的看法，直到所有元素都可见为止