применение различных задержек для подобных элементов в Jquery

Question

У меня есть что-то вроде этого:

<div class="pictures"> 
      <img src="01.jpg" id="b1"/> 
      <img src="02.jpg" id="b2" /> 
      <img src="03.jpg" id="b3" /> 
      <img src="04.jpg" id="b4" /> 
    </div> 

И я хочу, чтобы каждый из образов появляться одна за другой с некоторой задержкой. Я написал этот код, но это не идеальное решение, потому что мне нужно будет установить конкретный идентификатор для каждого из элементов, которые я хочу избежать. Сценарий здесь:

$('#b1, #b2, #b3, #b4').hide(); 

     setTimeout(function() { 
     $('#b1').fadeIn(500) 
     }, 600); 

     setTimeout(function() { 
     $('#b2').fadeIn(500) 
     }, 700); 

     setTimeout(function() { 
     $('#b3').fadeIn(500) 
     }, 800); 

     setTimeout(function() { 
     $('#b4').fadeIn(500) 
     }, 900); 

}); 

Что в идеале будет работать скрипт, который применяется к каждому «IMG» внутри DIV с «.pictures' класса некоторая задержка, скажем, 100ms выше, чем предыдущий„IMG“(начиная с 600). FadeIn постоянный (500). Я попробовал javascript и функцию «для», но не смог этого сделать. , так что я хочу, чтобы первый img стал fadeIn (500) после 600 мс, второй - fadein (500) с задержкой 700, следующей за 800 мс и т. Д.

Я буду добавлять новые изображения вовремя, но Я не хочу менять сценарий, поэтому автоматизация его необходима. Спасибо вам за все предложения.

Answer 1

OK. Я понял это. это будет работать:

$('.pictures img').hide().each(function(i){ 
    (function(e, i){ 
    setTimeout(function() { 
     e.fadeIn(500); 
    }, 500+100*i); 
    })($(this), i); 
}); 

спасибо за все предложения

Answer 2

Вы можете сделать это так:

delay = 0; 
$('.pictures img').each(function() { 
    $(this).delay(delay).fadeIn(); 
    delay += 100; 
}); 

Что это делает это задерживает FadeIn для каждого IMG внутри DIV с классом фотографий.

Answer 3

Вы можете использовать каждый.

$('#b1, #b2, #b3, #b4').hide(); 
$('#b1, #b2, #b3, #b4').each(function(){ 
     starter = 400; 
     current = $(this); 
     setTimeout(function() { 
     current.fadeIn(500) 
     }, starter = 100); 
});