jQuery - Verzögerung nach addClass in jeder Schleife

Question

Ich möchte die Klasse editing zu meinen Links hinzufügen, aber mit einer netten Animation, so dass ich die einzelnen Klassen nach einer leichten Verzögerung hinzufügen muss.

Wie kann ich das erreichen? Ich versuchte mit Einfügen und leer setTimeout innerhalb der Schleife, aber es hat nicht funktioniert.

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

Answer 1

Sie können dies tun, mit delay und 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 setzt eine Verzögerung in der Animation Warteschlange und queue plant einen Funktionsaufruf auf dieser Warteschlange. Beachten Sie, dass Sie dequeue im Callback queue benötigen, da die Art der Animation ist, dass Callback etwas startet, das später beendet wird (aber in Ihrem Fall nicht).