如何阻止我的网站上的jQuery动画重复或重新触发？

Question

请访问http://davidurbonas.com/website/并向下滚动到“技能”部分。你的进度条会开始和结束。当他们完成向下滚动时，好像您正在阅读我的网站的其余部分，然后再次向上滚动到该部分。你会看到百分比重新开始，前一个仍然在那里（希望你看到我的意思）。

如何让动画仅为我的进度条播放一次？我正在使用航点（脚本）触发动画本身的动画和CProgress。我已设置参数，以便条形图不会同时开始。

这是代码

<script type="text/javascript">
    $(document).ready(function(){

        setpara();

        $('#timeline').waypoint(function(direction) {
            myplugin = $('#p1').cprogress(options);
            setTimeout(function() {
                myplugin = $('#p2').cprogress(options2);
            }, 500);
            setTimeout(function() {
                myplugin = $('#p3').cprogress(options3);
            }, 1000);
            setTimeout(function() {
                myplugin = $('#p4').cprogress(options4);
            }, 1500);
            setTimeout(function() {
                myplugin = $('#p5').cprogress(options5);
            }, 2000);
            setTimeout(function() {
                myplugin = $('#p6').cprogress(options6);
            }, 2500);
            var myplugin;
        }); 


    });
    function setpara(){
        options = {
            img1: 'img/v1.png',
            img2: 'img/v2.png',           
            speed: 0,        
            percent: 0,
            limit: 85,
            showPercent : true, //show hide percent
            onComplete: function(p){console.log('complete',p);$("#p1 .percent").html(p+"%");}
        };
        options2 = {
            img1: 'img/v1.png',
            img2: 'img/v2.png',           
            speed: 0,        
            percent: 0,
            limit: 100,
            showPercent : true, //show hide percent
            onInit: function(){console.log('init');},
            onProgress: function(p){/*console.log('progress',p);*/},
            onComplete: function(p){console.log('complete',p);$("#p2 .percent").html(p+"%");}
        };
        options3 = {
            img1: 'img/v1.png',
            img2: 'img/v2.png',           
            speed: 0,        
            percent: 0,
            limit: 95,
            showPercent : true, //show hide percent
            onInit: function(){console.log('init');},
            onProgress: function(p){/*console.log('progress',p);*/},
            onComplete: function(p){console.log('complete',p);$("#p3 .percent").html(p+"%");}
        };
        options4 = {
            img1: 'img/v1.png',
            img2: 'img/v2.png',           
            speed: 0,        
            percent: 0,
            limit: 75,
            showPercent : true, //show hide percent
            onInit: function(){console.log('init');},
            onProgress: function(p){/*console.log('progress',p);*/},
            onComplete: function(p){console.log('complete',p);$("#p4 .percent").html(p+"%");}
        };
        options5 = {
            img1: 'img/v1.png',
            img2: 'img/v2.png',           
            speed: 0,        
            percent: 0,
            limit: 45,
            showPercent : true, //show hide percent
            onInit: function(){console.log('init');},
            onProgress: function(p){/*console.log('progress',p);*/},
            onComplete: function(p){console.log('complete',p);$("#p5 .percent").html(p+"%");}
        };
        options6 = {
            img1: 'img/v1.png',
            img2: 'img/v2.png',           
            speed: 0,        
            percent: 0,
            limit: 90,
            showPercent : true, //show hide percent
            onInit: function(){console.log('init');},
            onProgress: function(p){/*console.log('progress',p);*/},
            onComplete: function(p){console.log('complete',p);$("#p6 .percent").html(p+"%");}
        };

    }

</script>

我尝试过使用.stop（），但它对我不起作用。我可能只是放错了地方。我的jQuery还不是很强大：（