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

Question

问题：

当我第一次单击 skill-set link 时，会出现动画，但当您向下滚动时不会出现动画。当用户向下滚动页面时，每个圆圈都会启动它自己的动画。但是，如果您单击 skill-set link 两次，一切都会按预期进行。

所以我手头的问题是，为什么第一次单击 skill-set link 时不出现动画 on scroll？

这是我正在谈论的DEMO，请原谅糟糕的布局。一旦你点击 skill-set link，你会看到动画发生，但是当你向下滚动时，动画已经完成......但是，如果你点击 skill-set link 两次，然后向下滚动，当你向下滚动时，你会看到每个圆圈都有动画。这是第一次单击 link 时应该发生的情况，但由于某些奇怪的原因，它没有发生。

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

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

知道为什么第一次单击 link 时没有出现动画 on scroll 吗？

Answer 1

出现此行为是因为技能集中的所有内容 -link DIV 在第一次运行时仍然隐藏，因此所有进度条元素为零。由于它们为零，因此它们满足 if 语句的条件，并且在所有这些上都启用了动画。

为了修复它，我添加了对 show() 进度条元素的调用，包括在 show() 完成时对运行 animateElements 的参数。

我将设置 "animate" 为 false 的调用移至菜单项点击功能，因为它在 animateElements 中并没有真正起到任何作用。我还从点击事件处理程序中删除了 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，这似乎可以解决问题。

非常感谢 Tony 为我指明了正确的方向！

这是用于使这项工作按预期进行的最终代码段：

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

这是最后一次迭代：DEMO

不要介意布局...:)

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

Link clicked first time - on scroll animation doesn't work

javascript

jquery

animation

scroll

eventtrigger