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));

现在，您遍历所有这些，并告诉他们每个人500ms from now, do this。所以，500ms 从现在开始，他们每个人都会这样做。

Answer 2

使用Promises 和reduce。等到上一个动画结束后再开始下一个动画。

如果您想等待开始初始动画，请将整个链接包装在 setTimeout() 中。

Array.from(document.querySelectorAll("ul > li")).reduce((prev, curr) => {
  return prev.then(function() {
    return new Promise((resolve, reject) => {
      $(curr).animate({
        opacity: 0.2
      }, 1000, function() {
        resolve();
      });
    });
  });
}, Promise.resolve());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
</ul>

Answer 3

它们都是同时发生的，因为所有setTimeouts 都在each 内部调用，循环元素列表不需要很长时间（仅几毫秒）。如果你想链接它们，那么使用jQuery#animate 的complete 回调来发出下一个动画开始的信号：

function iterate() {
    var $list = $(".mini"),                                // get the whole list of elements
        i = 0;                                             // i is the index of the currently animated element from list

    function next() {                                      // the function that when called will get the current element from list (if exists) and starts that element's animation
        if(i < $list.length) {                             // if there is still un-animated elements in $list
            setTimeout(function() {                        // animate the current element
                go($list.eq(i), next);                     // specify that next will be called when the current element's animation is done
            }, 500);
            i++;                                           // increment i of course
        }
    }

    next();                                                // call next to start the magic
}

function go(element, complete) {                           // go will take an element to be animated, and a function that will be called when that animation is done
    element.animate({left: "500px"}, 200, complete);       // simply call animate with that additional function (see jQuery#animate docs)
}