jQuery加载条循环

Question

我正在尝试创建一个动画加载条5秒，当它完成时它会回到开始并连续循环

在下面的示例中，我有点工作，但有时当酒吧满载时会有一段很长的停顿，然后再回到开始并重新开始，有没有人知道如何解决这个问题或者可能是更好的方式吗？

load();

function load() {

    $('.progress div').animate({
        width: '100%'
    }, 5000, load);

    setTimeout(function () {
        $('.progress div').animate({
            width: '0%'
        }, 1, load);
    }, 5000);
}

http://jsfiddle.net/7jtFS/

Answer 1

试试这个：

load();

function load() {


    $('.progress div').animate({
        width: '100%'
    }, 5000, function() {
// Animation complete.

    $('.progress div').width(0)
    load();            

    });


}

Fiddle Link

Answer 2

我可以建议采用不同的方法吗？

你可以在两个函数之间交替，其中一个将填充栏，一个将重置它，而当它们完成时调用另一个：

的 Example

JS：

Step1Fill();

function Step1Fill(){
    $('.progress div').animate({
            width: '100%'
    }, 5000).promise().done(function(){
        Step2Reset();
    });
}
function Step2Reset(){
    $('.progress div').css({
        width:'0%'
    });
    Step1Fill();
}