[jQuery] Image swap behaviour with fade in/out using hover()

[CrisD]

I have been trying to over 3 weeks to write this without success.  So
far I have found swapImage (http://code.google.com/p/jquery-swapimage)
that works well to replace images, and bannerSwapper (http://
plugins.jquery.com/project/BannerSwapper) that pre-loads limited
images and does the swap with fade in/out effect, but I really need a
function that combines the two and allows the default image to fade in
and out using hover()  (http://docs.jquery.com/Events/hover#overout)
I know it is possible, how close I am getting remains to be seen...

Example:
$.('#menu > img').hover(
                                  function(){//on mouseover
                  $(this).fadeOut('img[1]',100,swapImageIn);
                  $(this).fadeIn('img[2]',100);
}
                                  function(){//on mouseout
                 $(this).fadeOut('img[2]',100, swapImageBack);
                 $(this).fadeIn('img[1]',100);
}


)}
  swapImageIn(){
$(this).replaceWith(img2);
}
  swapImageBack(){
$(this).replaceWith(img1);
}
 <a href="#" class="swapper"><img src="image1.gif" {src="image2.gif"} /
></a>

to fade out, swap and fade new image back in.

Any help in the right direction would be great, I'm nearly at my wit's
end (and my wit is getting nervous ;)

Thanks in advance,

Cris D.