Question

我正在尝试在进度条上执行动画序列：

function animateProgress() {
    var params  = [{from: 50, to: 100}, {from: 0, to: 100}, {from: 0, to: 50}];
    animateProgressStep(params, 0);
}

function animateProgressStep(params, i) {
    $(".progress").width(params[i].from).animate({width: params[i].to}, {
        duration: 2000, 
        complete: function() {
            if(i + 1 < params.length) {
                animateProgressStep(params, i + 1);
            } 
        }
    });
}

如果页面上有一个条形图，则会有效，但如果有多个条形图，则会在第二次迭代时中断，因为complete回调的调用次数与页面上的进度条元素一样多。

什么是解决方案？

可以在这里玩：http://jsfiddle.net/TythE/1/

Answer 1

如果我没有误解你，你可以为每个参数添加一个finished属性，这样它只会一次继续到下一个：

function animateProgress() {
    var params  = [{from: 50, to: 100}, {from: 0, to: 100}, {from: 0, to: 50}];
    animateProgressStep(params, 0);
}

function animateProgressStep(params, i) {
    $(".progress").width(params[i].from).animate({width: params[i].to}, {
        duration: 2000, 
        complete: function() {
            if(i + 1 < params.length && !params[i].finished) {
                params[i].finished = true;
                animateProgressStep(params, i + 1);
            } 
        }
    });
}

Answer 2

我希望我能正确理解你：

animate方法正在对具有类progress的所有元素进行操作。而不是只在课堂上选择，为什么不使用ID？

function animateProgressStep(id, params, i) {
    $("#" + id).width(params[i].from).animate({width: params[i].to}, {
        duration: 2000, 
        complete: function() {
            if(i + 1 < params.length) {
                animateProgressStep(id, params, i + 1);
            } 
        }
    });
}

Answer 3

我最终为每个元素开始动画序列，我觉得这是最干净，最简单的解决方案：

function animateProgress() {
    var params  = [{from: 50, to: 100}, {from: 0, to: 100}, {from: 0, to: 50}];
    $(".progress-overlay").each(function(){
        animateProgressStep($(this), params, 0);
    });
}

function animateProgressStep(el, params, i) {
    el.width(params[i].from).animate({width: params[i].to}, {
        duration: 2000, 
        complete: function() {
            if(i + 1 < params.length) {
                animateProgressStep(el, params, i + 1);
            } 
        }
    });
}

创建jQuery动画序列的麻烦

3 个答案: