다음 코드를 사용하면 li 요소가 하나씩 페이드 인 되길 원하지만 모두 함께 페이드 인됩니다.
$('li').each(function () {
$(this).delay(1000).fadeIn(1000);
});
아무도 그들이 하나씩 페이드 인하 지 않는 이유를 설명 할 수 있습니까?
이 .delay호출은 루프가 즉시 진행되는 것을 멈추지 않으므로 모든 지연 및 애니메이션이 한 번에 (거의) 시작됩니다.
가장 간단한 해결책은 현재 인덱스 번호로 지연 시간을 엇갈리는 것입니다.
$('li').each(function(index) {
$(this).delay(1000 * index).fadeIn(1000);
});
더 나은 솔루션은 의사 재귀 루프와 애니메이션의 "완료 콜백"을 사용하여 다음 반복을 트리거하는 것입니다.
var els = $('li').get();
(function loop() {
if (els.length) {
var el = els.shift();
$(el).fadeIn(1000, loop);
}
})();
이 방법은 일반적으로 이전 페이드 인이 완료 될 때까지 다음 페이드 인이 시작될 수 없도록하고, 두 번째 애니메이션이 첫 번째 애니메이션이 완료 될 때까지 큐에 대기하지 않기 때문에 여러 개의 병렬 지연 / 페이드 큐 (요소 당 하나씩) 생성을 방지하기 때문에 선호됩니다. 끝마친.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다