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。有没有办法为单个磁贴设置动画或为其动画排队，以便第一个更改，然后是第二个，然后是第三个，等等？

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

如果你想知道一个只有jQuery的方法：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

测序动画JQuery / Velocityjs

2 个答案: