FadeIn FadeOut con Jquery con un twist

Question

Estoy tratando de crear un pase por encima de la acción, que trae en un color de la imagen y también una vez que el pase se quita se desvanece de nuevo a su imagen original.

Llegué hasta el punto de desvanecimiento en la primera imagen con la ayuda Funka y Brad en este foro, sin embargo, tengo la necesidad de obtener por lo que se desvanece una vez que pase fuera.

Actualmente se desvanece la imagen a la nada y luego se desvanece la nueva.Esta continuación, permanecer en el lugar sin importar si me pase fuera o no.

Id gustaría que por lo que parece como el color de la imagen se desvanece a través del blanco y negro como aposición a la decoloración a 0 antes de desvanecerse en...así como revertir una vez que el pase es eliminado.

Cualquier ayuda se agradece.

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

Su elemento emergente sólo tiene una función encima del ratón - para hacer algo en 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!
});

Answer 2

No se sabe muy bien jQuery, pero el siguiente código si lo que he estado usando y suena como lo que podría ser después. Yo lo uso con imágenes de sprite para detener el molesto parpadeo que aparece en algunos navegadores.

$(function() {
    $(".fadebtn")
    .find("span")
    .hide()
    .end()
    .hover(function() {
            $(this).stop(true, true).find("span").fadeIn(600);
    }, function() {
            $(this).stop(true, true).find("span").fadeOut(200);
    });
});