Question

我想在我的链接中添加类editing但是有一个很好的动画，所以我需要在稍微延迟之后添加每个类。

我怎样才能做到这一点？我尝试在循环中插入并清空setTimeout，但它没有工作。

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

Answer 1

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

＆＃13;

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();

＆＃13;

.editing {
  background-color: yellow;
}

＆＃13;

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

＆＃13;

delay在动画队列中设置延迟，queue在该队列上调度函数调用。请注意，您需要在queue回调中dequeue，因为动画的本质是该回调可能会启动稍后完成的内容（但在您的情况下，您不是）。

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

1 个答案: