圆形进度条 JQuery 插件循环问题

Question

圆形进度条 JQuery 插件循环问题

javascriptjquery

4

问题：

我正在使用 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);
});

这是我所说的一个粗略演示：演示 - 点击“技能组”选项卡并向下滚动。

非常感谢您提供的任何帮助！

- This Guy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rooster · Accepted Answer

所以我认为我已经在这个更新（再次）的JSFIDDLE上实现了你想要的内容。

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

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

最后，我添加了一个init属性到animate elements函数中，当true时，将所有data-animate重置为false。只有通过选项卡点击才会设置为true，而不是通过滚动事件。

以下是相关的代码更新：

...新的init参数（还必须为传递的滚动事件腾出空间）

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

现在，animateElements由选项卡点击处理程序最初调用。

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

最后需要注意的是，现在里面有很多东西可以剪掉，这些是我在证明概念时忘记删除的 jsfiddle 中的内容。

祝好！