image swap technique - to fade instead

Question

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

Answer 1

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

Answer 2

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 :)