排序动画 JQuery/Velocityjs

Question

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

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/

Answer 2

如果您想了解 only-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>

排序动画 JQuery/Velocityjs

Sequencing Animations JQuery/Velocityjs

javascript

jquery

html

animation

velocity.js