Circle Progress Bar JQuery 插件循环问题

Question

问题： 我正在为一个项目使用 Circle Progress JQuery 插件（版本：0.6.0）并对其进行了一些修改，但是，每个圆圈似乎在很长一段时间内重复自身（或循环），而不仅仅是执行动画一次。

由于所做的修改，例如添加一个链接，如果单击它，动画开始的位置，似乎不是问题所在。当您开始向下滚动时，当您这样做时 - 每个圆圈都会根据设置的百分比开始动画，但会在停止之前不断重复几次。当用户向下滚动时，它应该只为每个圆圈启动一次动画，但我似乎无法弄清楚为什么会发生这种情况。

这是我所拥有的：

$('.about_nav a:nth-of-type(2)').click(function () {
function animateElements() {
    $('.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() - 30 && !animate) {
            $(this).data('animate', false); // Change this 'false -or- true' - Currently set to false so that each time a user clicks on 'Skill-set' link, animation occurs
            $(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();
$('.about_body_wrapper').scroll(animateElements);
});

这是我的意思的粗略演示：DEMO - 单击“技能集”选项卡并向下滚动。

对此的任何帮助将不胜感激！

Answer 1

所以我想我已经在This updated(again) JSFIDDLE 上实现了你想要的

基本上，我在动画开始之前将data-animate 属性设置为true，这会阻止任何后续的动画调用再次对其进行动画处理（您看到的循环问题）。

然后，我将animateElements 函数定义从点击处理事件中取出。我这样做是为了在更全局的范围内调用它。我现在在更改选项卡的单击处理程序中调用animateElements。必须这样做，因为它在页面加载时被触发使所有元素 offsetTop = 0，因为它们开始隐藏。

最后，我在动画元素函数中添加了一个 init 属性，当 true 时，它会将所有 data-animate 重置为 false。仅当从选项卡单击而不是滚动事件调用时才如此。

相关代码更新如下：

...新的初始化参数（也必须为传入的滚动事件腾出空间）

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

...animateElements 现在最初由选项卡单击处理程序调用

    $(currentlist).fadeOut(250, function () {
        $(newlist).fadeIn(200, function(){
            animateElements({}, true);
        });
    });

最后，请注意那里有一堆东西现在你可以剪掉了，因为我在证明这个概念时忘记在 jsfiddle 中了。

干杯！