ナビ：画像入れ替わりアニメ滋賀県守山市のホームページ制作

HTML

  <div id="nav">
   	<nav class="gNavi">
		<a class="menu" id="menu"><span>MENU</span></a>
		<div class="panel">
      	<ul>
        		<li><a href="#"><img src="img/nav/gmenu01.png" alt="ホーム" /></a></li>
        		<li><a href="#"><img src="img/nav/gmenu02.png" alt="会社案内" /></a></li>
        		<li><a href="#"><img src="img/nav/gmenu03.png" alt="業務案内" /></a></li>
        		<li><a href="#"><img src="img/nav/gmenu04.png" alt="導入事例" /></a></li>
        		<li><a href="#"><img src="img/nav/gmenu05.png" alt="採用情報" /></a></li>
        		<li><a href="#"><img src="img/nav/gmenu06.png" alt="お問い合わせ" /></a></li>
      	</ul>
		</div>
   	</nav>
  	</div>
  	<!--ID nav-->

JS

<script type="text/javascript">
$(function() {
	$('.gNavi li img')
	.hover(
		function(){
			$(this).stop().animate({'marginTop':'-98px'},'fast');
		},
		function () {
			$(this).stop().animate({'marginTop':'0px'},'fast');
		}
	);
});
</script>

サンプル