jQueryでマウスオーバーを印象的にする:jQuery Animated Menu

マウスオーバー時に効果を与えることは当たり前になっていますが、もうちょっと工夫をするとユーザーの興味を喚起できるかもしれません。
jQueryの.hoverという基本的な手法を利用して、マウスオーバーを印象的にする小ネタです。
via:jQuery Animated Menu
jQueryでマウスオーバーを印象的にする:jQuery Animated Menuサンプル

使用方法
今回はサンプルとしてメニュー的なhtmlを記述してみます。
<ul id="menu">
<li class="home"><a href="#">home</a></li>
</ul>

CSSは以下とします。
ul#menu {height:81px;margin:0;padding:0;}
ul#menu li a {display:block;height:81px;width:159px;text-indent:-9999px;}
ul#menu li.home {background:url(menu.jpg) no-repeat;}
ul#menu li.home a {background:url(menu.jpg) 0px -81px;}

上記のようなhtml、cssがあったとき、以下のようにscriptを記述します。
jQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$("ul#menu li a").css("opacity","0");
//初期設定として画像のopacityを0にします。
$("ul#menu li a").hover( //hoverです。
function () {
$(this).stop().animate({opacity: 1}, 'slow');},
//マウスオーバー時にopacityを1にします。
function () {
$(this).stop().animate({opacity: 0}, 'slow');}
//マウスアウト時にopacityを0に戻します。
);
});
});
</script>

これで初期opacityが0としたul#menu li.home a {background:url(menu.jpg) 0px -81px;}がホバー時に乗ってくることになります。
このようにjQueryは考え方次第で、基本を知っているだけで印象的な表現が可能になります。

jQueryでマウスオーバーを印象的にする:jQuery Animated Menuサンプル

sponsors

「jQueryでマウスオーバーを印象的にする:jQuery Animated Menu」をシェアする

記事作成:
記事URL:

TOP > > > jQueryでマウスオーバーを印象的にする:jQuery Animated Menu