Because Modern Browser Fader by John Davenport Scheuer says it's for images I just took it out of the code.
This works when the images are the same size! I had some problems when they weren't.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
<div id="start" style="position:absolute;top:0;left:0;height:400px;width:400px;" onmouseover="doit();" onmouseout="jabby();">
<img src="http://www.tilnorsk.com/fade/rainforest1.jpg" /><br />
THE RAINFOREST
</div >
<div id="end" style="opacity:0;position:absolute;top:0;left:0;height:400px;width:400px;" onmouseover="doit();" onmouseout="jabby();">
<img src="http://www.tilnorsk.com/fade/rainforest2.jpg" /><br />
There are many animals in the rainforest
</div>
<script>
function doit(){
$("#start").animate({opacity: "0"}, 2500);
$("#end").animate({opacity: "1"}, 2500);
}
function jabby(){
$("#end").animate({opacity: "0"}, 2500);
$("#start").animate({opacity: "1"}, 2500);
$("#end").css("opacity", "0");
$("#start").css("opacity", "1");
}
</script>
</body>
</html>