Fade images in sequence

What i am trying to achieve is to fade images in sequence but set it so the first one starts then the next one then the next so the fade in a row.

Here a link to how far ive got.

http://bwnew.users34.interdns.co.uk/

here is my code its working but i want a slight pause so the flow from left to right.

<script type="text/javascript">
$('#slider img:gt(0)').hide();
$('#slider2 img:gt(0)').hide();
$('#slider3 img:gt(0)').hide();

a=0;
b=0;
c=0;


setInterval(function() {

        $("#slider img").eq(a).fadeOut();
        if(a==$('#slider img').length-1)
            a=0;
        else
            a++;
$("#slider img").eq(a).fadeIn();


$("#slid开发者_如何学Cer2 img").eq(b).fadeOut();
        if(b==$('#slider2 img').length-1)
            b=0;
        else
            b++;
$("#slider2 img").eq(b).fadeIn();


$("#slider3 img").eq(c).fadeOut();
        if(c==$('#slider3 img').length-1)
            c=0;
        else
            c++;
$("#slider3 img").eq(c).fadeIn();


}, 3000);

Simplest-but-explicit:

$('#slider img').fadeIn(function(){
  $('#slider2 img').fadeIn(function(){
    $('#slider3 img').fadeIn();
  });
});

Brilliant thanks this is the working code

Just need to try and get rid off the blank space.

http://bwnew.users34.interdns.co.uk/

<script type="text/javascript">
$('#slider img:gt(0)').hide();
$('#slider2 img:gt(0)').hide();
$('#slider3 img:gt(0)').hide();

a=0;
b=0;
c=0;

setInterval(function() {                 

$("#slider img").eq(a).fadeOut();
        if(a==$('#slider img').length)
            a=0;
        else
            a++;

$("#slider2 img").eq(b).fadeOut();
        if(b==$('#slider2 img').length)
            b=0;
        else
            b++;

$("#slider3 img").eq(c).fadeOut();
        if(c==$('#slider3 img').length)
            c=0;
        else
            c++;

$("#slider img").eq(a).fadeIn(function(){
  $("#slider2 img").eq(b).fadeIn(function(){
    $("#slider3 img").eq(c).fadeIn();
  });
}); 


}, 3000);


</script>