image swap technique - to fade instead

Hey, I am using this code below to swap on image on hover:

$(function() {
 $("#compost").hover(function() {
  origImage=$(this).attr("src");
  $(this).attr("src", "images/order-compost-over.gif")
 },function() {
  $(this).attr("src", origImage)
 });
});

Ia m trying to use fadeIn instead of a swap. I tried working it in but no luck.I tried having the img tag fadeIn but it didnt work.

Thanks,

Ryan

From stackoverflow

• Check out ImageSwitch. Does everything you want and a fair bit more.

• If you're trying to "merge" the two images, you won't be able with standard techniques.

  Instead, you should:

  • Create a new IMG object
  • Position that absolutely over the previous image
  • Set the new image's src to the old one and set its opacity to 1.
  • Set the old image's src to the new URL and set its opacity to 0.
  • Now animate both simultaneously to oposite values
  • Finally, get rid of the new image.

  This is a tricky one, but should work fine :)