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，因爲動畫的本質是該回調可能會啓動稍後完成的任務（但在您的情況下，您不會）。