IMG Fadein en Fadeout

Hey,
ik heb deze code in de head staan

<script language="Javascript"> 
<!-- 
if (document.images) 
{
image1 = new Image 
image2 = new Image 
image1.src = normal.png
image2.src = hover.png 
} 
-->
</script>

en dit in de body

<a onMouseOver="document.mouseover.src=image2.src" onMouseOut="document.mouseover.src=image1.src">
<img src="normal.png" border=0 name="mouseover"></a>

En dat levert dit op.
Maar hoe maak ik daar een fade-in en fade-out van bij mouse-over en mouse-out?

Alvast bedankt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>mouseover</title>
<script type=text/javascript src=https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js></script>
<script type=text/javascript>
$(document).ready(function(){
 
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});
</script>
<style>
div.fadehover {
    position: relative;
    }
 
img.a {
    position: absolute;
    left: 0;
    top: 0;
        z-index: 10;
    }
 
img.b {
    position: absolute;
    left: 0;
    top: 0;
    }
</style>
</head>
 
<body>
<div class="fadehover">
<img src="normal.png" alt="" class="a" />
<img src="hover.png" alt="" class="b" />
</div>
</body>
</html>

Bedankt ik test het morgen // wow bedankt Daiman, ziet er nu veel mooier uit!