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时间表上队列中的函数调用。请注意，您需要在queue回调中调用dequeue，因为动画的本质是该回调可能会启动稍后完成的任务（但在您的情况下，您不会）。