javascript - jQuery - 在每个循环中的 addClass 之后延迟

Question

我想将 editing 类添加到我的链接中，但要有一个漂亮的动画，所以我需要在稍微延迟后添加每个类。

我怎样才能做到这一点？ 我尝试在循环内插入和清空 setTimeout 但它没有用。

var $links = $('.my_box .link');
$link.each(function() {
    $(this).addClass('editing');
    // A delay should be here
});

Answer 1

您可以使用 delay 执行此操作和 queue :

function markLinks() {
  var $links = $('.my_box .link');
  $links.each(function(i) {
    var $this = $(this);
    $this.delay(i * 200).queue(function() {
      $this.toggleClass("editing").dequeue();
    });
  });
  setTimeout(markLinks, 1500);
}
markLinks();

.editing {
  background-color: yellow;
}

<div class="my_box">
  <div class="link">one</div>
  <div class="link">two</div>
  <div class="link">three</div>
  <div class="link">four</div>
  <div class="link">five</div>
  <div class="link">six</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

delay 在动画队列中设置延迟，queue 安排对该队列的函数调用。请注意，您需要 dequeue在 queue 回调中，因为动画的本质是回调可能会开始一些它稍后完成的事情(但在你的情况下，你不是)。