FadeIn FadeOut with Jquery with a twist

Question

I am trying to create a hover over action which brings in a coloured image and also once the hover is removed it fades back to its original image.

I got it to the point of fading in the first image with the help Funka and Brad on this forum however i need to get it so it fades out once you hover off.

Currently it fades out the image to nothing and then fades the new one in. This will then stay in place regardless of whether i hover off or no.

Id like it so it seems like the colour image is fading through the black and white one as apposed to fading to 0 before fading in...as well as reverting once the hover is removed.

Any help would be appreciated.

//Loop through the images and print them to the page
   for (var i=0; i < totalBoxes; i++){
    $.ajax({
     url: "random.php?no=",
     cache: false,
     success: function(html) {
      // following line I originally suggested, but let's make it better...
      //$('#bg').append(html).fadeIn('slow');
      // also note the fine difference between append and appendTo.
      var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
      $('img', $d).hover(function() {
       var largePath = $(this).attr("rel");
       $(this).fadeOut("slow", function() {
        $(this).attr({ src: largePath }).fadeIn("slow");
       });
      });
     }
    });
   }

Answer 1

Your hover only has a mouseover function - to do something on mouseout...

$('img', $d).hover(function() {
    //This is the mouseover function
    var largePath = $(this).attr("rel");
    $(this).fadeOut("slow", function() {
        $(this).attr({ src: largePath }).fadeIn("slow");
    }
    );
},
function() {
    //This is the mouseout function!  Do something here!
});