applying different delay for similar elements in jQuery -

i have this:

    <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> 

and want each of images appear, 1 after 1 delay. have written code, it's not perfect solution, because need set specific id each of elements want avoid. script here:

  $('#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);  }); 

what ideally work script applies every 'img' inside div class '.pictures' delay let's 100ms higher previous 'img' (starting 600 example). fadein constant (500). tried javascript , function 'for' didn't manage this. want first img fadein (500) after 600 ms, second fadein (500) 700 delay, next 1 800ms delay etc...

i keep adding new images in time, don't want change script, automation of necessary. thank sugestions.

you can use each.

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