I have two images. I would like to configure them so that when you mouseover the default image, it slowly fades to the second image. How could one go about this?

Thanks!

I have two images. I would like to configure them so that when you mouseover the default image, it slowly fades to the second image. How could one go about this?

Thanks!

• javascript
• jquery
• html
• css
• ajax

• Check these answers: stackoverflow./questions/1857827/… – dertkw Commented Jul 1, 2011 at 0:33
• 1 Have you thought about the necessary logic if someone moves their hand away from your image? Does it go back to the default? Does it continue fading? Does it fade back? I ask because to do this without the fading is very simple, with fading is much more code. – Kerry Jones Commented Jul 1, 2011 at 0:34

3 Answers 3

I've assumed that you want to fade back in when you mouseout, here's something to be getting started with.

// markup
<div id="imgs">
    <img src="..." id="i1">  <!-- this is the mouseover image -->
    <img src="..." id="i2">  <!-- this is the default image -->
</div>


// css
img {
    display:block;
    position:absolute;
    top: 0;
    left: 0;
 }


// jQuery
$(function() {
    $('#imgs')
    .mouseenter(function() {
        $('#i2').fadeOut('slow');
    })
    .mouseleave(function() {
        $('#i2').fadeIn('slow');
    });  
});

Something like this should work:

$('#first_image').mouseover( function() { 
    $(this).fadeOut('fast', function() {
        $('#new_image').fadeIn('slow');
    }
}

This simply fades out the old image on mouse over, and once the fadeout is plete, fades in the new one.

You could use the JQuery .animate effect. The following tutorial helped me learn how to use it and shows exactly what you're looking for. An image that fades in on mouseover and then out on mouseout. http://bavotasan./tutorials/creating-a-jquery-mouseover-fade-effect/