이미지를 하나씩 페이드 아웃하는 방법은 무엇입니까?

Question

나는이 작업을 위해 settimeout을 사용하는 예제를 보았습니다. 그러나 이는 무한한 수의 이미지에는 효과가 없습니다. 여러 이미지에서 호출되는 각 기능은 동시에 페이드 인됩니다. 실행과 관련하여 차단되는 루프와 같은 함수가 있습니까?

$('img').each(function(i) { 
    $(this).delay(i * 400).fadeIn(); 
}); 

Answer 1

당신은 jQuery를 delay 방법을 사용할 수 있습니다. fadeIn 메소드에 대한 콜백을 지정할 수 있습니다. 애니메이션이 끝나면 호출됩니다. 콜백에서 다음 이미지의 애니메이션을 시작할 수 있습니다.

Answer 2

당신은 자바 스크립트의 방법을 차단 사용하지 (또는 생각) 안 :

Answer 3

"실행에 블럭이 인 모든 루프가 가능합니까?"

번호

"나는 이미지의 무기한 작동하지 않을 것이라고하지만.이 작업을 수행 할 경우 setTimeout 체인 사용 예를 보았다."

함수가 콜백으로 사용되는 경우 작동합니다. 예를 들면 : 대한

var images = [ '#img1', '#img2', '#img3' ], index = 0; 
function fade() { 
    if (index < images.length) { 
    $(images[index++]).fadeIn(fade); 
    } 
} 
fade(); 

Answer 4

function fadeInComplete(i,$imgs) 
{ 

    if (i >= $imgs.length) return; 
    $imgs[i].fadeIn(400,fadeInComplete.bind(i+1,$imgs); 
} 

$imgs = $('img'); 
fadeInComplete(0,$imgs);