How to Initiate Image Fade Out and Fade In with jQuery Function

I have a little jQuery function in my Asp.Net MasterPage that fades an image out after 3 seconds. It works fine, but I'm having difficulty getting it to fade back in. I've tried several things as I'm new using jQuery, and I know there's something I'm doing or not doing. I can't put my finger on it. Here's what I have:

 <script src="/Scripts/jquery-2.1.1.js" type="text/javascript"></script> 
 <script type="text/javascript">
    $(document).ready(function (){
        setTimeout(function (){
            $('#Image1').fadeOut('slow', function(){
                $('#Image1').remove();
            }); 
        }, 3000);

    });

    var fadeBack = function () {
        $('#Image1').fadeIn();
    };

    fadeBack();
</script>

Like I said, it fades out with no problem, but I cannot find the right code structure to bring it back in. I'm thinking maybe an If statement block about the opacity is needed?

The real trick is that I want alternate images in 3 boxes I have as seen here:

I have about 12 images total, and just want them to fade one image out, and bring another in. Being more specific, I mean the following:

Column (1): Image1.FadeOut(); Image2.FadeIn(); Image2.FadeOut(); Image3.FadeIn(), and etc. So for now, I just need help with how to do this in Column One, and I'll see if can string something together to make the other Columns 2 and 3 follow up. The timing would be 3 second for each.

Lastly, could I use an array to store other images which aren't in the Column One box already and call them into the slideshow fade sequence? I appreciate you help for this knowledge, so I can lock this in mind. Thanks.

Use this code, it will hide the image after 3 seconds and after that 1 sec, it will show image back.

  $(document).ready(function (){
    setTimeout(function (){
        $('#Image1').fadeOut('slow'); 
    }, 3000);
    setTimeout(function (){
        $('#Image1').fadeIn('slow'); 
    }, 4000);
});

if you want like a slideshow use this code

  <div class="yourimg_container">
     <img  src="http://localhost/app/img/off.png" id="Image1"/>
  </div>
  /* make an array containing your images path (you can fetch images from database   using asp.net/php query)*/

   var ss=  ["http://localhost/app/img/off.png",
           "http://localhost/app/img/on.png",
           "http://localhost/app/img/slider.png"];


  window.setInterval(function(){
      slideshow();
    }, 3000);

  function slideshow(){
    var im=$("#Image1").attr("src");

    for(i=0;i<ss.length;i++){

        if(ss[i]==im){
            if(i==ss.length-1) $('#Image1').attr("src",ss[0]);  
            else $('#Image1').attr("src",ss[i+1]);  
        }
    } 

  }

additionally you can use other effects like this

  function slideshow(){
    var im=$("#Image1").attr("src");

    for(i=0;i<ss.length;i++){

        if(ss[i]==im){
            if(i==ss.length-1) {

                $('#Image1').fadeOut(500);  
                $('#Image1').attr("src",ss[0]); 
                $('#Image1').fadeIn(700);   
            }
            else {
                $('#Image1').fadeOut(500);  
                $('#Image1').attr("src",ss[i+1]);   
                $('#Image1').fadeIn(700);   
            }
        }
      } 
    }