排序动画 JQuery/Velocityjs答案

【问题标题】：Sequencing Animations JQuery/Velocityjs排序动画 JQuery/Velocityjs
【发布时间】：2017-01-22 22:41:28
【问题描述】：

基本上，我有多个具有相同类名的 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。有没有办法为单个图块设置动画或将它们的动画排队，以便第一个更改，然后是第二个，然后是第三个，等等？

【问题讨论】：

标签： javascript jquery html animation velocity.js

【解决方案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>

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/

【讨论】：

【解决方案2】：

如果您想知道唯一的 jQuery 方法：

$('.tile').each(function(){
    var $this = $(this),
        $next = $this.prev();
    
    $this.queue(function(){
        $this.fadeOut(1500, function(){
            $this.next().dequeue();
        });
    });
}).first().dequeue();

.tile {
  width: 100px;
  height: 100px;
  background: yellow;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>

【讨论】：