マウスオーバーでにょきっと伸びるメニュー　jQuery│システムガーディアン株式会社

1 みんな大好きjQuery
2 マウスオーバーで一瞬光る(ウィンク)

みんな大好きjQuery

時々みかけるマウスでふれるとにょきっと伸びるメニューを
jQueryで作ってみました☆

jQueryは初見ではなんのこっちゃって感じになりますが
CSS3の難解で高度な設定に比べたら
慣れれば簡単な記述でオブジェクトの操作が出来て便利です。

[jQuery]

[javascript] <script>
$(function(){
$(“#easing, #easing1, #easing2, #easing3”).mouseover(function(){
$(this).animate({
“width” : “100px”,
}, 30).fadeTo(60, 0.8).css({
“color” : “blue”
});
}).mouseout(function(){
$(this).animate({
“width” : “80px”,
}, 60).fadeTo(20, 1).css({“color” : “black”});
});
});
</script>
[/javascript]

[CSS] [css] #easing {
width:80px;
height:30px;
background:#F90;
text-align:right;
padding:5px;
font-size:20px;
padding-right:10px;
font:bold;
}

#easing1 {
width:80px;
height:30px;
background:#F90;
text-align:right;
padding:5px;
font-size:20px;
padding-right:10px;
margin-top:5px;
}

#easing2 {
width:80px;
height:30px;
background:#F90;
text-align:right;
padding:5px;
font-size:20px;
padding-right:10px;
margin-top:5px;
}

#easing3 {
width:80px;
height:30px;
background:#F90;
text-align:right;
padding:5px;
font-size:20px;
padding-right:10px;
margin-top:5px;
}
[/css] [HTML] [html] <div id=”easing”>HOME</div>
<div id=”easing1″>DIARY</div>
<div id=”easing2″>BBS</div>
<div id=”easing3″>Mail</div>
[/html]