.hover fondu image, fondu nouvelle image po À la sortie retourner à l'image originale

Question

J'ai mon logo de la compagnie apparaissant dans le pied de page de mon site, lorsque l'utilisateur survole le pied de page Je veux que l'image logo.png disparaisse, puis biglogo.png pour se fondre - à sa place.

Lorsque l'utilisateur déplace le curseur de #footer Je veux logo.png à disparaître avant.

<div id="footer"> 
       <div id="logowrap"> 
        <img src="images/logo.png" alt="" class="active" /> 
        <img src="images/biglogo.png" alt="" /> 
       </div> 
</div> 

J'ai essayé tant de choses, mais ne semblent être en mesure d'obtenir le droit logique, je finis . avec des images clignotantes, des images qui fadeOut quand je veux qu'ils se fanent dans

Toute aide reçue greatfully (je tire mes cheveux)

Answer 1

Essayez ceci:

$(function() { 
    $("#logowrap").hover(function() { 
    $("#logowrap img:first").stop().fadeOut("fast",function() { 
     $("#logowrap img:last").stop().fadeIn("fast"); 
    }); 
    }, function() { 
    $("#logowrap img:last").stop().fadeOut("fast",function() { 
     $("#logowrap img:first").stop().fadeIn("fast"); 
    }); 
    }); 

Il estompe la première image et, une fois terminé, commence à fondre l'autre, puis l'inverse est émis. Vous pouvez utiliser $(this) un peu plus, mais cela semble plus propre pour ce cas particulier, je pense.

Answer 2

<div id="footer"> 
       <div id="logowrap"> 
        <img src="images/logo.png" alt="" class="active" /> 
        <img src="images/biglogo.png" alt="active_big" /> 
       </div> 
</div> 

$(document).ready(function(){ 

$('#active').bind('mouseout',function(){ 

$ ('# actif') fadeOut ('slow'). $ ('# actif'). Attr ('src', 'images/logo.png'); )};

$('#active_big').bind('mouseover',function(){ 

$ ('# actif'). FadeIn ('lent'); $ ('# active_big'). Attr ('src', 'images/biglogo.png'); )};

}); 

devrait fonctionner correctement pour vous