javascript - jQuery:动画同时发生，而不是与 .each() 迭代背靠背

Question

我正在遍历一组“.mini”类对象。对于每个对象，每个对象在移动(调用go函数)之前会等待500毫秒(setTimeout函数)。例如，

function iterate() {
    $(".mini").each(function(index)
    {
        var element = $(this);
        setTimeout(function() {go(element)}, 500);
    });
}

function go(element) {
    element.animate({left: "500px"},200);
}

但是，每个元素的动画都是同时发生的(所有 32 个 .mini 对象同时移动)，而不是一个接一个地移动。如何让第一个在开始时间 500 秒后开始移动，第二个在开始时间 1000 秒后开始移动，等等？

Answer 1

您应该将 500 乘以 index + 1，以便第一个发生在 500ms 内，第二个发生在 1000ms等

setTimeout(function() {go(element)}, 500 * (index + 1));

现在，您遍历所有这些，并告诉它们中的每一个 从现在起 500 毫秒，执行此操作。因此，500ms 从现在开始，他们每个人都这样做。