Javascript Opcaity OnMouseOver

[Agent Cosmic]

How do I animate an image to fade in when I roll my mouse over a <div> and fade out when I move my mouse away. So far this is what I have. It doesn't seem to work well. Please help me, thanks.

Javascript

<script type="text/javascript">

var homebutton = document.homebtn.style.opacity;
var portfoliobutton = document.getElementById("portfolioimg");
var linkbutton = document.getElementById("linkimg");
var aboutbutton = document.getElementById("aboutimg");

function home_on(){
	document.homebtn.style.opacity = document.homebtn.style.opacity + 0.1;
}
function home_off(){
	document.homebtn.style.opacity = document.homebtn.style.opacity - 0.1;
}
</script>

HTML

<div id="homebg" onmouseover="home_on()" onmouseout="home_off()"><img name="homebtn" style="opacity: 0;" src="Home-On.png" alt="Home Button Image" /></div>