.hover fade image out, fade new image in. On exit return to original image

Question

I have my company logo appearing in the footer of my site, when the user hovers over the footer I want the image logo.png to fade out, then biglogo.png to fade in - in its place.

When the user moves the cursor away from #footer I want logo.png to fade back in.

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

I've tried so many things but dont seem to be able to get the logic right, I end up with flashing images, images that fadeout when I want them to fade in.

Any help greatfully received (I'm pulling my hair out)

Answer 1

Try this:

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

It fades the first image and when finished starts fading the other back in, then does the reverse on hover out. You can use $(this) a bit more, but this looks cleaner for this specific case I think.

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(){

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

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

$('#active').fadeIn('slow'); $('#active_big').attr('src','images/biglogo.png'); )};

});

Should work fine for you