Question

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

Example here

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

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

一旦用户向下滚动并将其置于屏幕中间，就应该开始“动画”。它现在的方式是动画从页面加载开始，但是条形图还没有显示，如下面的小提琴：

Fiddle

在前一个完成后，每个小节开始加载会有一点额外的费用。

我在堆栈上发现了一些类似的问题，但答案不足以满足我的需求： Animate progress bar on scroll＆amp; 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();
    }

});

试一试，让我知道。

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

3 个答案: