Question

我想要做的是按照更改列表中id的顺序为几个对象设置动画。但似乎所有_anim都在同一时间运行。

如何按顺序运行它们？

$("#Sim2").click(function () {

   var change = [9,4];

   change.forEach(function (i) {
        _anim(i);
   });
});

var _anim = function (id) {
    $("#number"+id).animate({
         left: '50%',
    }, 500);
};

Answer 1

使用setTimeout

change.forEach(function (i) {
    setTimeout(function () {
        _anim(i);
    }, 500 * i);
});

Answer 2

下面的函数_anim保证运行所有动画是订单。它从最后一个完成回调中执行下一个动画。它还包括一个可选的回调函数，该函数在所有动画完成后执行。

以下是行动中的代码。 http://jsfiddle.net/Hrkee/

$("#Sim2").click(function () {
    var change = [9,4];
    _anim(change, 0, { left: '50%' }, 500, function() { alert('all complete'); });
});


function _anim(aryKeys, index, properties, duration, callback) {
    $("#number" + aryKeys[index]).animate(properties, duration, function(){
        if(index + 1 <= aryKeys.length - 1){
            _anim(aryKeys, index + 1, properties, duration, callback);
        } else {
            if(callback)
                callback();
        }
    });
}

仅供参考，我从一篇关于同步加载异步javascript的博客文章中偷了代码。 http://www.mobtowers.com/load-cross-domain-javascript-synchronously-using-jquery/

Answer 3

您可以使用递归函数..

小提琴HERE

function processElements(aRRay, k) {
    if (aRRay[k]) {
        $('#number' + aRRay[k]).animate({
            left: '50%'
        }, 500, function () {
            processElements(aRRay, k + 1)
        });
    }
}

$("#Sim2").click(function (e) {
    var change = [1, 2, 3];
    processElements(change, 0);
});

为数组中的每个对象调用自定义函数

3 个答案: