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

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


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"} /