Question

我正在显示一个圆形进度条，当动画在0-1000的圆轴周围旋转时，如果我将函数设置为913，那么它会旋转到整圆的91.3％。所有这一切都很有效但是它在页面上很低，所以当它到达持有它的div时我需要它开始。

我已经尝试了，这就是我所拥有的，但目前该功能甚至没有运行。

$("body").scroll(function() {

 var scrolledpx = parseInt($("body").scrollTop());    
 var p = $("#housePoints");
 var offset = p.offset();

 if(scrolledpx == offset.top )

 {

 // function for progress bar
 var bar = new ProgressBar.Circle(oak, {
   color: '#E44024',
   // This has to be the same size as the maximum width to
   // prevent clipping
   strokeWidth: 4,
   trailWidth: 1,
   easing: 'easeInOut',
   duration: 1400,
   text: {
     autoStyleContainer: false
   },
   from: { color: '#e3ebf7', width: 1 },
   to: { color: '#E44024', width: 4 },
   // Set default step function for all animate calls
   step: function(state, circle) {
     circle.path.setAttribute('stroke', state.color);
     circle.path.setAttribute('stroke-width', state.width);

     var value = Math.round(circle.value() * 1000);
     if (value === 0) {
       circle.setText('');
     } else {
       circle.setText(value);
     }

   }
 });

 bar.animate(0.913);  // Number from 0.000 to 1.000

}

})

正如我所说，容器的ID是#housePoints，我希望这个动画在进入视图时运行。也许即使它到达视图底部的div，它们在100px顶部和底部的div上有一些填充，所以当达到顶部并且用户仍然错过它时可能仍然会运行。

感谢您的帮助。 GB

Answer 1

您可以尝试使用.show（）（示例。jQuery('#housePoints').show()）方法绑定您的进度圈，如此问题的答案中所述。

https://stackoverflow.com/a/1225238/2512022

jQuery延迟函数调用，直到元素在视图中（显示）

1 个答案: