// JavaScript Document
$(function(){
  /* 例A: 上から下へアニメーション */
  $('#navA a')
	 .css( {backgroundPosition: "-20px 35px"} )
	 .mouseover(function(){
		$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
	 })
	 .mouseout(function(){
		$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
		   $(this).css({backgroundPosition: "-20px 35px"})
		}})
	 })
  /* 例B: 右から左へアニメーション */
  $('#navB a')
	 .css( {backgroundPosition: "0 0"} )
	 .mouseover(function(){
		$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
	 })
	 .mouseout(function(){
		$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
		   $(this).css({backgroundPosition: "0 0"})
		}})
	 })
  /* 例C: 1色フェード */
  $('#navC a')
	 .css( {backgroundPosition: "0 0"} )
	 .mouseover(function(){
		$(this).stop().animate({backgroundPosition:"(0 -40px)"}, {duration:200})
	 })
	 .mouseout(function(){
		$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:200})
	 })
  /* 例C: 2色フェード */
  $('#navD a')
	 .css( {backgroundPosition: "0 0"} )
	 .mouseover(function(){
		$(this).stop().animate({backgroundPosition:"(0 -20px)"}, {duration:500})
	 })
	 .mouseout(function(){
		$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
	 })
});