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

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

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

我希望进度条在屏幕上显示时开始加载

当用户向下滚动并将它们放在屏幕中间时，“动画”应该开始。按照现在的方式，动画在页面加载时开始，但条形图仍不可见，如下图所示：

额外的一点是，每根钢筋在前一根钢筋完成后开始加载

我在stack上发现了一些类似的问题，但答案不足以满足我的需要： &

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

但是没有任何好的结果。 在这件事上有人能帮我吗

提前谢谢

让我试试看

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

});

函数startProgressBar（）{
$（“.meter>span”）。每个（函数（）{
$（本）
.data（“origWidth”，$（this）.width（））
.宽度（0）
.制作动画({
宽度：$（this）.data（“origWidth”）
}, 1200);
});
}
$（窗口）。滚动（函数（）{
var目标=$（'第三'）；
var targetPosTop=target.position（）.top；//页面中的位置
var targetlight=target.height（）；//目标的高度
var$target=targetLight+targetPosTop；//整个目标位置
var$windowst=$（window.scrollTop（）-（$（window.height（）/2）；//是除以2得到中间屏幕视图。
如果（$windowst>=$targetPosTop）和（$windowst<$target））{
//我想开始吧
startProgressBar（）；
}
});

试试看，让我知道。

这是一把小提琴：

我使用了滚动偏移量和您的特殊部分偏移量的比较来检测该部分可见的时刻。 使用jQuery

queue

函数，动画被一个接一个地排队处理，您可以在jQuery文档（）中了解它。

---

另外，当第一次“加载”发生时，“滚动”事件被取消绑定，当部分可见时，不要在滚动事件上反复运行“加载”。

这里是一个更新的小提琴

这允许所有进度条同时运行。如果你和我一样，有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');
        }
    });

});

---

今天早上我会注意的！；）看起来不错，但是Micha提供了一个更好的解决方案来满足我的需求，仍然支持这个！谢谢这正是我需要的！感激工作，但$（文档）.unbind（'scroll'）；对我造成了一些其他的副作用。这对我很有效！关于如何在点击按钮而不是滚动位置时触发动画，有什么想法吗？作为对赛尔夫（以及任何其他可能想知道的人）的提醒，我可以通过将此修改添加到上面的代码中，为动画添加额外的偏移/延迟：window.innerHeight+300；

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

});