我的页面上运行了相当多的动画,我认为它导致这个特定的动画断断续续,然后有时没有完成它的动画。
我已经将这个写成动画页面上的一些百分比条。
我已经尝试添加一个超时功能,以便它给其他动画一些时间来完成,但是超时不起作用并且它似乎在页面加载后立即触发。确保我的百分比完成的任何帮助都是惊人的
function dopercentage()
{
$('.bar-percentage[data-percentage]').each(function () {
var progress = $(this);
var percentage = Math.ceil($(this).attr('data-percentage'));
$({countNum: 0}).animate({countNum: percentage}, {
duration: 1000,
easing:'swing',
step: function() {
// What todo on every count
var pct = '';
if(percentage == 0){
pct = Math.floor(this.countNum) + '%';
}else{
pct = Math.floor(this.countNum+1) + '%';
}
progress.text(pct) && progress.siblings().children().css('width',pct);
}
});
});
}
$(document).ready(function() {
setTimeout( dopercentage(), 1000);
});
这是一个 HTML 示例,说明应该动画化的内容,但在 91% 时失败了
<div id="bar-5" class="bar-main-container" style="margin-left:auto;margin-right:auto;background:#cb0050;max-width: 250px;">
<div class="wrap">
<div id="bar-percentage13" class="bar-percentage" data-percentage="100">91%</div>
<div class="bar-container">
<div class="bar" style="width: 91%;"></div>
</div>
</div>
</div>
最佳答案
您正在立即调用 dopercentage()
,然后将结果传递给 setTimeout。
setTimeout
需要函数引用,而不是函数调用的结果。
只需传递函数引用(名称):
$(document).ready(function() {
setTimeout( dopercentage, 1000);
});
除此之外,我只需要从示例中删除最初的 91% 文本。当代码没有触发时,我得到了你的测试值:)
JSFiddle: https://jsfiddle.net/Ly3vj12d/1/
关于javascript - Jquery Animate 的问题没有完成它的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34920698/