■

[jQuery]jQueryで64x64アイコンに仕掛けを仕込む
floatで横並びにしたアイコンにマウスホバーさせるとマスコットキャラクターが上に飛び出すようにしたい。

html

icon_barは高さを取得するためのダミー

<div class="icon_list">
<div class="icon_bar"></div>
<div class="icon"><a href="#"><img src="hoge.png"><br>hoge</a></div>
<div class="icon"><a href="#"><img src="fuga.png"><br>fuga</a></div>
<div class="icon"><a href="#"><img src="piyo.png"><br>piyo</a></div>
</div>

css

.icon_list{float:left;padding:0.5em 0; margin: 1em 0;}
.icon_bar{float:left; height: 130px;}
.icon{
float:left; text-align: center;vertical-align:bottom;
font-size:x-small; 
height:100px;width:92px;
margin-top:30px;
background: #fff url(caractor.png) no-repeat center top;
}

「margin-top:30px;」で飛び出し領域を確保しておく。

script

マージンとパディングを入れ替えるような感じ。飛び出し領域と同じサイズを指定する。

<script type="text/javascript">
<!--
$(function(){
  $(".icon_list > .icon").hover(
    function(){
      $(this).stop().animate({"margin-top" : "0px","padding-top" : "30px"}, "fast");
    },function(){
      $(this).stop().animate({"margin-top" : "30px","padding-top" : "0px"}, "fast");
    }
  );
});
-->
</script>