みんな大好きjQuery

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

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

DEMO

 

[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]

マウスオーバーで一瞬光る(ウィンク)

小技としてバナーなどでみかけます。
DEMO

[jQuery]

[javascript]
<script>
$(function(){
$(“#photo”).mouseover(function(){
$(this).fadeTo(10, 0.4);
$(“#photo”).fadeTo(“slow”, 1);
});

});
</script>
[/javascript]

 

[CSS]

[css]
#photo {
display : block;
width : 300px;
height :250px;
background-color : blue;
}
[/css]

[HTML]

[html]
<div id=”photo”></div>
[/html]

優 ( エンジニア )
この記事を書いた人:優 ( エンジニア )

システムガーディアン爆弾処理班。アクセス負荷対策やNginxへの移行案件が多いこの頃。IBM SoftLayerやAWSなどクラウド案件も多くなってきました。