FadeIn FadeOut avec JQuery avec une torsion

Question

J'essaye de créer un survol au-dessus de l'action qui apporte une image colorée et aussi une fois que le hover est enlevé il revient à son image originale.

Je l'ai eu au point de disparaître dans la première image avec l'aide de Funka et Brad sur ce forum mais j'ai besoin de l'obtenir afin qu'il s'éteint une fois que vous avez plané.

Actuellement, l'image disparaît complètement et le fondu disparaît. Il reste alors en place, que je passe ou non.

Id comme il semble donc que l'image en couleur se fane à travers le noir et blanc comme apposé à fondu à 0 avant de fondre ... ainsi que revenant une fois le vol stationnaire est enlevé.

Toute aide serait appréciée.

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

Votre vol stationnaire a seulement une fonction mouseover - de faire quelque chose sur 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

Je ne sais pas vraiment, mais jQuery le code suivant si ce que j'ai utilisé et des sons comme ce que vous pourriez être après. Je l'utilise avec des images de sprites pour arrêter le scintillement agaçant qui apparaît dans certains navigateurs.

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