Circle Progress Bar JQuery Plugin Issues

Question

Question: I use the JQuery plugin to promote the project (version: 0.6.0) for the project and made some changes to it, however, each circle seems to repeat itself (or cycle) for a long period of time, and not only perform the animation once .

Due to the changes made, such as adding a link to where, if it is clicked, the animation starts, it seems not a problem. This is when you start to scroll down, and when you do - each circle starts an animation based on a percentage set, but continues to repeat several times before it stops. It should only run the animation for each circle once when the user scrolls down, but I cannot figure out where this comes from.

Here is what I have:

$('.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);
});

Here is a rough demonstration of what I mean: DEMO - go to the "Skill-set" tab and scroll down.

Any help on this would be greatly appreciated!

Answer 1

so I think I achieved what you wanted on This updated (again) JSFIDDLE

basically, I set the property data-animateto true before the start of the animation, which stops any subsequent animation calls from animating them again (problem with the loop you saw).

animateElements . , . animateElements , . , offsetTop = 0, .

, init , 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, .

!