Javascript 循环进度条JQuery插件循环问题

问题： 我正在为一个项目使用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);
});

$（'.about_nav a:n类型（2）'）。单击（函数（）{
函数animateeelements（）{
$（'.progressbar'）。每个（函数（）{
var elementPos=$（this）.offset（）.top；
var topOfWindow=$（window.scrollTop（）；
变量百分比=$（this.find（'.circle'）.attr（'data-percent'）；
var百分比=parseInt（百分比，10）/parseInt（100，10）；
var animate=$（this.data（'animate'）；
if（elementPos

这里是我的意思的大致演示：-单击“技能集”选项卡并向下滚动

---

在此方面的任何帮助都将不胜感激

所以我想我已经实现了你想要的

基本上，我在动画开始之前将

data animate

属性设置为true，这会阻止任何后续的animate调用再次设置动画（您看到的循环问题）

然后，我从单击处理事件中提取了

animateeelements

函数定义。我这样做是为了在更全球化的范围内进行。现在，我在更改选项卡的单击处理程序中调用

animateElements

。必须这样做，因为它在页面加载时被激发，使得所有元素offsetTop=0，因为它们一开始是隐藏的

最后，我向animate elements函数添加了一个init属性，当

true

时，该属性将所有

数据animate

重置为false。只有在通过选项卡单击调用时，而不是通过滚动事件调用时，才会出现这种情况

以下是相关代码更新：

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

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

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

最后，请注意，这里有一堆东西，现在你可以删掉，我在证明这个概念时忘记在JSFIDLE中删掉了

---

干杯

这真的很接近…但是，所有的圆都在滚动中重新开始，它需要在滚动中每个圆动画紧接着另一个圆动画发生，并且只发生一次…这有意义吗？所以你需要每个循环在前一个循环的动画完成后开始？有些是的。一旦访问者点击链接，除了页面上看到的内容外，其他所有内容都会出现动画。然后，一旦用户向下滚动，每个圆圈将根据用户滚动的频率一个接一个地设置动画，并且只应出现一次。-然后，如果用户决定向上滚动，则在所有圆圈动画完成后不会发生任何事情-如果用户决定向下滚动，也会发生同样的情况…但是，如果用户再次单击链接，整个过程（或圆圈动画）将重新开始。这有助于解释我要做什么吗？我想基本的问题在这里解决了：

if（elementPos

-它似乎不知什么原因不认识它……Rooster，我非常感谢你迄今为止的帮助，真的！它肯定会实现……如果（例如）用户单击“历史记录”选项卡，然后再单击“技能集”选项卡，是否有办法“重置”所有动画？因为它现在就放在那里，所以没有发生这种情况……我注意到您取出了

animateElements（）$（窗口），我正在使用
$（'.about_body_wrapper'）。滚动（animateElements）但是小提琴不允许我这么做是因为某些原因…而且你的最新更新遗漏了
animateElements（）并不理想。。。
    $(currentlist).fadeOut(250, function () {
        $(newlist).fadeIn(200, function(){
            animateElements({}, true);
        });
    });