How to fade to a different image on mouse over?

I have two images. I would like to configure them so that when you mouseo开发者_Go百科ver the default image, it slowly fades to the second image. How could one go about this?

Thanks!

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 complete, 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.com/tutorials/creating-a-jquery-mouseover-fade-effect/