问题:
我正在使用 Circle Progress JQuery 插件(版本:0.6.0)进行项目开发并对其进行了一些修改,但是每个圆圈似乎都会重复播放自己(或循环)一段时间,而不仅仅是执行一次动画。
由于已经进行了修改,如添加链接以在点击后开始动画,但问题似乎并不在这里。 当您开始向下滚动时,每个圆圈都开始根据设置的百分比进行动画,但会重复几次才停止。 它应该只在用户向下滚动时为每个圆圈启动一次动画,但我似乎找不到其根本原因。
以下是我的内容:
这是我所说的一个粗略演示: 演示 - 点击“技能组”选项卡并向下滚动。
非常感谢您提供的任何帮助!
我正在使用 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);
});
这是我所说的一个粗略演示: 演示 - 点击“技能组”选项卡并向下滚动。
非常感谢您提供的任何帮助!
if (elementPos < topOfWindow + $(window).height() - 30 && !animate)
- 出于某种原因,它似乎无法识别... - This GuyanimateElements();
,我也需要将其放在那里...我正在使用$('.about_body_wrapper').scroll(animateElements);
而不是$(window).scroll(animateElements);
,但出于某种原因,fiddle没有允许我这样做......随着您的最新更新,省略animateElements();
并不理想... - This GuyanimateElements({}, true);
引起的...基本上,如果单击任何链接,则会触发事件(或动画)...因此,如果您单击历史链接,然后快速返回技能集链接,您会看到动画延迟。我们如何改变一下,只有在单击技能集链接时才会发生动画? - This Guy