Как затухать изображения один за другим?

Question

Я видел пример, используя привязку привязки для этого. Однако это не будет работать для неограниченного количества изображений. Функция .each, вызываемая несколькими изображениями, приведет к их постепенному исчезновению. Существуют ли какие-либо функции, такие как .each, доступный для цикла, который блокируется при выполнении?

Answer 1

Вы можете использовать JQuery delay метод:

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

Answer 2

Вы никогда не должны использовать (или даже думать о) блокирующих методов в JavaScript. Вы можете указать обратный вызов для метода fadeIn. Он будет вызываться после завершения анимации. В вашем обратном вызове вы можете начать анимацию следующего изображения.

Answer 3

"Есть ли какие-либо функции, такие как .each, доступный для цикла, который является блокировкой в ​​исполнении?"

No.

«Я видел пример использования цепочки 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);