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

Question

我想创建一个包含多个部分的网页。其中一个部分是进度条之类的东西。这些进度条是“动画的”，因此用户可以看到它们在屏幕上加载，如示例所示。

Example here

现在这是正常工作，但我的问题是：

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

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

Fiddle

额外一点是，每个栏在前一个栏完成后开始加载。

我在堆栈上发现了一些类似的问题，但答案不足以满足我的需求： Animate progress bar on scroll & Run animation when element is visible on screen

我尝试过类似的东西（这不是实际的代码，但这是我记得的）：

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 事件在第一次“加载”发生时被解除绑定，而不是在部分可见时在滚动事件上一次又一次地运行“加载”。

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();
    }

});

试一试，告诉我。