MacのDock拡大アニメーション風メニューバー作ってみた

Team OZで使っていたくるくる回るメニューバー
くるくる回る動き鬱陶しいよねということで
MacのDockアニメーション風メニューバーに変更することになった

最初はプラグインを使って実装しようとしたけど
エラー吐かれまくり、競合しまくって表示おかしいとかで自分で作ることに

案外簡単で2時間程度で作れた
その備忘録

Demo
f:id:K396_109:20140212233657p:plain

<div id="map-menu">
   <a class="menu-item" href="#"><img src="home.png"/><span>HOME</span></a>
   <a class="menu-item" href="#"><img src="searchicon.png"/><span>検索</span></a>
   <a class="menu-item" href="#"><img src="money.png"/><span>料金</span></a>
   <a class="menu-item" href="#"><img src="guide.png"/><span>使い方</span></a>
</div>
#map-menu{
	position: absolute;
	width: 700px;
	left: 50%; margin-left: -200px;
	text-align: center;
}

.menu-item{
	position: relative;
	text-decoration: none;
	width: 100px;
	margin: 0 -5px;
	float: left;
}

.menu-item img{
	position: relative;
	width: 70px;
	margin-top: 30px;
}

.menu-item span{
	position: relative;
	display: block;
	top: -15px;
	color: #000; font-size: 20px;
	opacity: 0;
}
$(function(){
   $(".menu-item").hover(function(){
      $(this).children("span").stop(true, false).animate({"opacity":1})
      $(this).prev(".menu-item").children("img").stop(true, false).animate({"width":"90px", "margin-top":"20px"})
      $(this).next(".menu-item").children("img").stop(true, false).animate({"width":"90px", "margin-top":"20px"})
      $(this).children("img").stop(true, false).animate({"width":"100px", "margin-top":"-10px"})
   }, function(){
      $(this).children("span").stop(true, false).animate({"opacity":0})
      $(this).children("img").stop(true, false).animate({"width":"70px","margin-top":"30px"})
      $(this).prev(".menu-item").children("img").stop(true, false).animate({"width":"70px", "margin-top":"30px"})
      $(this).next(".menu-item").children("img").stop(true, false).animate({"width":"70px", "margin-top":"30px"})
	});
}

画像と文字の幅をあまり大きくしたくないので
.menu-item spanでtop: -15pxを指定

横にうにょうにょ動くのがキモチワルイので
その場で画像が大きくなるように指定

jQueryにはhover時にhoverされたものと、その両隣の画像が大きくなるようにしてある



たったこれだけのためにプラグイン使おうとしてたのがちょっと悔しい