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이 필요합니다. 애니메이션의 본질은 콜백이 나중에 완료되는 무언가를 시작할 수도 있기 때문입니다 (그러나 실제로는 그렇지 않습니다).