Cacher is the code snippet organizer for pro developers

$(function() {
  var num = 1;
	$('#nav1 li')
	//マウスオーバー画像を配置
	.each(function(){
		$(this).css('background', 'url(img/nav0'+num+'.gif) no-repeat 0px -29px')
		num++;
	})
	.find('img').hover(
		function(){  
			$(this).stop().animate({'opacity' : '0'}, 500);  
		},
		function(){
			$(this).stop().animate({'opacity' : '1'}, 1000);
		}
	); 
});

<ul id="nav1">
  <li><a href="#"><img src="img/nav01.gif" width="100" height="59" /></a></li>
	<li><a href="#"><img src="img/nav02.gif" width="100" height="59" /></a></li>
	<li><a href="#"><img src="img/nav03.gif" width="100" height="59" /></a></li>
	<li><a href="#"><img src="img/nav04.gif" width="100" height="59" /></a></li>
</ul>

#nav1 li {
  float: left;
	margin-left: -1px;
	width: 100px;
	height: 30px;
	overflow: hidden;
}