我正在尝试创建一个动画加载条5秒,当它完成时它会回到开始并连续循环
在下面的示例中,我有点工作,但有时当酒吧满载时会有一段很长的停顿,然后再回到开始并重新开始,有没有人知道如何解决这个问题或者可能是更好的方式吗?
load();
function load() {
$('.progress div').animate({
width: '100%'
}, 5000, load);
setTimeout(function () {
$('.progress div').animate({
width: '0%'
}, 1, load);
}, 5000);
}
答案 0 :(得分:1)
试试这个:
load();
function load() {
$('.progress div').animate({
width: '100%'
}, 5000, function() {
// Animation complete.
$('.progress div').width(0)
load();
});
}
答案 1 :(得分:1)
我可以建议采用不同的方法吗?
你可以在两个函数之间交替,其中一个将填充栏,一个将重置它,而当它们完成时调用另一个:
的 Example 强>
JS:
Step1Fill();
function Step1Fill(){
$('.progress div').animate({
width: '100%'
}, 5000).promise().done(function(){
Step2Reset();
});
}
function Step2Reset(){
$('.progress div').css({
width:'0%'
});
Step1Fill();
}