Fade out & Replace problems

Fade out & Replace problems

I'm going a little crazy with this. I'm attempting to fade out an image and replace it with another image in the same place and I just can't figure it out. Here is what I have. Any help that you experts out there can give me, would be great!  Basically, I want the page to load showing image 1, then image 2 would slowly fade in over top of image 1 and replace it permanently.

Here's the CSS:

.image1 {
    position:absolute;
    left:0px;
    top:0px;
    width: 864px;
    height: 576px;
    float:left;
    z-index:-1;
}
.image2 {
    position:absolute;
    left:0px;
    top:0px;
    width: 864px;
    height: 576px;
    float:left;
    display:none;
    z-index:999;
}

Here's the HTML/JavaScript:

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $(window).load(function () {
        $("div.image2").fadeIn(slow, function () {
          });
          return false;
        });
    });
  </script>

</head>
<body>

<div class="image1"><img src="images/image1.jpg"  /></div>
<div class="image2"> <img src="images/image2.jpg" /></div>

</body>
</html>