在屏幕上可见时，在进度条上启动动画

我想创建一个包含几个部分的网页。 其中一个部分就像进度条。 这些进度条是“动画的”，以便用户看到它们在屏幕上加载，如示例中所示。

这里的例子

现在这个工作原样，但我的问题是：

当条形在屏幕上可见时，我希望进度条开始加载。

一旦用户向下滚动并将其置于屏幕中间，就应该开始“动画”。 它现在的方式是动画在页面加载时开始，但是条形图仍然不可见，如下面的小提琴：

小提琴

稍微多一点是每个酒吧在前一个完成后开始加载。

我在堆栈上发现了一些类似的问题，但答案不足以满足我的需求： 在屏幕上显示元素时 滚动和运行动画 上的动画进度条

我尝试了类似的东西（它不是真正的代码，但它是我记得的东西）：

var target = $("#third").offset().top; var interval = setInterval(function() { if ($(window).scrollTop() >= target) { //start loading progress bar } }, 250); 

但没有任何好结果。 有谁可以帮我解决这个问题？

提前致谢！

Answer 1

这是一个小提琴： http ： //jsfiddle.net/rAQev/4/

我已经使用了滚动偏移和特殊部分偏移的比较来检测此部分变得可见的时刻。 动画排队使用jQuery queue函数一个接一个地处理，您可以在jQuery文档（ http://api.jquery.com/queue/ ）中阅读它。 当第一次“加载”发生时， scroll事件也是解除绑定的，而不是在部分可见时在scroll事件上反复运行“加载”。

Answer 2

这是一个更新的小提琴http://jsfiddle.net/9ybUv/

这个允许所有进度条同时运行。 如果你像我一样有5个或更多，那么需要花费很长时间才能完成一个，然后是下一个，然后是下一个。

 $(function() { var $section = $('#third'); function loadDaBars() { $(".meter > span").each(function() { $(this) .data("origWidth", $(this).width()) .width(0) .animate({ width: $(this).data("origWidth") }, 1200); }); } $(document).bind('scroll', function(ev) { var scrollOffset = $(document).scrollTop(); var containerOffset = $section.offset().top - window.innerHeight; if (scrollOffset > containerOffset) { loadDaBars(); // unbind event not to load scrolsl again $(document).unbind('scroll'); } }); }); 

Answer 3

我试试吧

  function startProgressBar() { $(".meter > span").each(function() { $(this) .data("origWidth", $(this).width()) .width(0) .animate({ width: $(this).data("origWidth") }, 1200); }); } $(window).scroll(function() { var target = $('#third'); var targetPosTop = target.position().top; // Position in page var targetHeight = target.height(); // target's height var $target = targetHeight + targetPosTop; // the whole target position var $windowst = $(window).scrollTop()-($(window).height()/2); // yes divided by 2 to get middle screen view. if (($windowst >= $targetPosTop) && ($windowst < $target)){ // start progressbar I guess startProgressBar(); } }); 

试一试，让我知道。