FadeIn fadeout con jQuery con un tocco

Question

Sto cercando di creare un passaggio del mouse sopra l'azione che porta in un'immagine colorata e anche una volta che il passaggio del mouse viene rimosso si affievolisce alla sua immagine originale.

ho preso al punto di dissolvenza nella prima immagine con l'aiuto Funka e Brad su questo forum ma ho bisogno di farlo in modo che svanisce una volta che si passa fuori.

Al momento si affievolisce l'immagine a nulla e poi svanisce quella nuova. Questo sarà quindi rimanere sul posto indipendentemente dal fatto che mi passa il mouse fuori o no.

Id piace così sembra che l'immagine a colori sta svanendo attraverso quella in bianco e nero come apposto al fading a 0 prima di svanire nel ... così come un ritorno una volta che il passaggio del mouse viene rimosso.

Qualsiasi aiuto sarebbe apprezzato.

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

Il tuo hover ha solo una funzione di passaggio del mouse - per fare qualcosa sul 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

Io non so davvero jQuery ma il seguente codice se ciò che ho utilizzato e suona come quello che si potrebbe essere dopo. Io lo uso con immagini sprite per fermare il fastidioso sfarfallio che appare in alcuni browser.

$(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);
    });
});