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にする必要があることに注意してください。アニメーションの性質は、そのコールバックが後で終了するものを開始している可能性があるからです（ただし、あなたの場合はそうではありません）。