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

Question

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

这里的例子

现在这个工作正常,但我的问题是:

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

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

小提琴

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

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

我尝试了类似的东西(它不是真正的代码,但它是我记得的东西):

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事件是unbinded当第一个"加载"发生,而不是在滚动事件一次又一次地运行"装载"时,部分是可见的.