Question

问题：

当我第一次单击skill-set链接时，会发生动画，但向下滚动时不会发生。每个圆圈都是在用户向下滚动页面时启动它自己的动画。如果你点击skill-set链接两次，那么一切都按预期的那样工作。

所以我的问题是，为什么动画on scroll在第一次点击skill-set链接时出现？

这是我所谈论的DEMO，请原谅可怕的布局。单击skill-set链接后，您会看到动画发生，但是当您向下滚动时，动画已经完成...但是，如果您单击skill-set链接两次，然后向下滚动，当您向下滚动时，您会看到每个圆圈都有动画效果。这是第一次点击链接时应该发生的事情，但由于某些奇怪的原因，它不是。

JS：

$('#skill-set-link').click(function () {

    function animateElements(index, element) { // (e, init)
        if (element) { // (init)
            $('.progressbar').data('animate', false);
        }

        $('.progressbar').each(function () {
            var elementPos = $(this).offset().top;
            var topOfWindow = $(window).scrollTop();
            var percent = $(this).find('.circle').attr('data-percent');
            var percentage = parseInt(percent, 10) / parseInt(100, 10);
            var animate = $(this).data('animate');

            if (elementPos < topOfWindow + $(window).height() + 10 && !animate) {
                $(this).data('animate', true);
                $(this).find('.circle').circleProgress({
                    startAngle: -Math.PI / 2,
                    value: percent / 100,
                    thickness: 2, // Change this for thickness
                    fill: {
                        color: '#16A085'
                }
                }).on('circle-animation-progress', function (event, progress, stepValue) {
                    $(this).find('.percent').text((stepValue * 100).toFixed(0) + "%"); // NOTE: Change '.toFixed(0)' to '.toFixed(1)' to get 1 decimal place to the right...
                }).stop();
            }
        });

    }
    animateElements({}, true);
    $('.about_body_wrapper').scroll(animateElements);
});

=============================================== ==========================

在第一次点击链接时，想知道为什么动画on scroll没有出现？

Answer 1

行为正在发生，因为技能组链接DIV中的所有内容在第一次运行时仍然处于隐藏状态，因此所有进度条元素的顶部位置为零。由于它们为零，因此它们符合if语句的条件，并且正在对所有这些语句启用动画。

要解决此问题，我添加了对show()进度条元素的调用，包括在show()完成时运行animateElements的参数。

我移动了调用以将“animate”设置为false到菜单项单击功能，因为它在animateElements中实际上没有任何用途。我还从click事件处理程序中删除了animateElements函数，以简化代码的读取。

function animateElements(index, element) { // (e, init)

    $('.progressbar').each(function () {
        var elementPos = $(this).offset().top;
        var topOfWindow = $(window).scrollTop();
        var percent = $(this).find('.circle').attr('data-percent');
        var percentage = parseInt(percent, 10) / parseInt(100, 10);
        var animate = $(this).data('animate');

        if (elementPos < topOfWindow + $(window).height() + 10 && !animate) {
            $(this).data('animate', true);
            $(this).find('.circle').circleProgress({
                startAngle: -Math.PI / 2,
                value: percent / 100,
                thickness: 2, // Change this for thickness
                fill: {
                    color: '#16A085'
                }
            }).on('circle-animation-progress', function (event, progress, stepValue) {
                $(this).find('.percent').text((stepValue * 100).toFixed(0) + "%"); // NOTE: Change '.toFixed(0)' to '.toFixed(1)' to get 1 decimal place to the right...
            }).stop();
        }
    });

}

$('#skill-set-link').click(function () {
    $('.progressbar').data('animate', false);
    $('#skill-set').fadeIn(animateElements);
});

$(window).scroll(animateElements);

Answer 2

感谢Tony Hinkle的帮助 - 这是答案。

由于主div被隐藏 - 我们需要预先show()主要div ...但是，按照Tony的建议添加$('#skill-set').show(0, animateElements);，并没有正常工作 - 所以相反$('#skill-set').fadeIn(animateElements)取代了0并取出似乎可以解决问题的function animateElements(index, element) { // (e, init) $('.progressbar').each(function () { var elementPos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); var percent = $(this).find('.circle').attr('data-percent'); var percentage = parseInt(percent, 10) / parseInt(100, 10); var animate = $(this).data('animate'); if (elementPos < topOfWindow + $(window).height() + 10 && !animate) { $(this).data('animate', true); $(this).find('.circle').circleProgress({ startAngle: -Math.PI / 2, value: percent / 100, thickness: 2, // Change this for thickness fill: { color: '#16A085' } }).on('circle-animation-progress', function (event, progress, stepValue) { $(this).find('.percent').text((stepValue * 100).toFixed(0) + "%"); // NOTE: Change '.toFixed(0)' to '.toFixed(1)' to get 1 decimal place to the right... }).stop(); } }); } $('#skill-set-link').click(function () { $('.progressbar').data('animate', false); $('#skill-set').fadeIn(animateElements); }); $(window).scroll(animateElements);。

非常感谢Tony让我指引正确的方向！

以下是用于使其按预期工作的最终片段：

%E9%BB%91%E7%9C%BC%E5%9C%88%E4%B8%8D%E8%A6%81%E5%95%8A

这是最后的迭代：DEMO

不要介意布局......：）

链接第一次点击 - 滚动动画不起作用

2 个答案: