THE HAM MEDIA BLOG

以前紹介した、Mootoolsを使ったナビゲーション、
「Fancy Navigation with MooTools Javascript」
「Mootoolsでグラデーションのように変化するナビゲーション
　「Fancy Navigation」の設定の仕方」
これをMootoolsじゃなくて、jQueryで似たようなものを作ってみることにした。

同じとまではいかなかったけど、できるだけ綺麗に動作するようなのにしてみた。

設定方法

HTMLは以前と同じのを使います。

■HTML

<ul>
	<li><a href="#" class="nav">Nav Item 1</a></li>
	<li><a href="#" class="nav">Nav Item 2</a></li>
	<li><a href="#" class="nav">Nav Item 3</a></li>
	<li><a href="#" class="nav">Nav Item 4</a></li>
	<li><a href="#" class="nav">Nav Item 5</a></li>
	<li><a href="#" class="nav">Nav Item 6</a></li>
	<li><a href="#" class="nav">Nav Item 7</a></li>
	<li><a href="#" class="nav">Nav Item 8</a></li>
	<li><a href="#" class="nav">Nav Item 9</a></li>
	<li><a href="#" class="nav">Nav Item 10</a></li>
</ul>

■CSS

今回はhoverの設定をしません。

a.nav{
    display: block;
    padding: 10px;
    color: #ddd;
    background: #000;
    width: 200px;
    text-decoration: none;
    border-bottom:1px solid #ddd;
}

■JavaScrip その１t

$(function(){
	$("a.nav").hover(
		function(){   
        	$(this).animate({opacity: 0},500)
        		.animate({opacity: 0.6},10);
    	},   
    	function(){   
        	$(this).animate({opacity: 1.0},500);
    	});
});

■プレビュー その１

■ちょっと説明

このスクリプトでは、animateを指定して、
薄くなるように指定している。
Mootoolsと同じようにしてみたかったが、
animateはbackground-color(backgroundColor)などが適応されない。
なので今回はotacityで代用してみた。

このotacityの問題としては、文字も薄くなってしまうこと。
あとはこれさえ上手くいけばMootoolsのとほとんど同じだったかなと思う。

もう一つの方法

jQueryの設定、１ではanimateつかったのですが、
それよりもfadeToを使ったほうが指定が楽だった。

１とわけるために、classをnav2にしています。
CSSは同じ設定で、動きもanimateの時と同じにしています。

■JavaScrip その２

$(function(){
    $("a.nav2").hover(
		function(){   
        	$(this).fadeTo(500,0).fadeTo(10,0.6);
    	},   
    	function(){   
        	$(this).fadeTo(500,1.0);
    	});
});

■プレビュー その２