jQuery延迟函数调用直到元素被视为(显示)



我正在显示一个圆形进度栏,当动画绕圆形轴旋转时,从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

您可以尝试在.show(((示例。jQuery('#housePoints').show()(方法中绑定您的进度圆圈,如答案中所述。

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

最新更新