javascript - 序列化动画 JQuery/Velocityjs

Question

本质上，我有多个具有相同类名的 div(例如:

<div class = "tile"></div>
<div class = "tile"></div>
<div class = "tile"></div>
<div class = "tile"></div>
...

我想以第一个 div(例如)将不透明度更改为 0 的方式为它们设置动画。但是，如果我只是这样做

$('.tile').animate({opacity: 0});

或

$('.tile').velocity({opacity: 0});

它们都同时将不透明度更改为 0。有没有一种方法可以为单个图 block 制作动画或将它们的动画排队，以便第一个更改，然后是第二个，然后是第三个，依此类推？

Answer 1

您可以通过递归地将动画应用到下一个 DOM 来实现它，如下所示:

HTML

<div class = "tile"></div>
<div class = "tile"></div>
<div class = "tile"></div>
<div class = "tile"></div>
<style>
  .tile {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 1px solid blue;
  }
</style>

JS

var counter = 0;
function makeTransparent($target) {
  $target.eq(counter).animate({opacity: 0}, function(){
    counter++;
    if (counter < $target.length) {
      makeTransparent($target);
    }
  });
}

makeTransparent($('.tile'));

这是一个活生生的例子:https://jsfiddle.net/uzf67L8c/