THE HAM MEDIA BLOG

グラデーションのように変化するナビゲーション「Fancy Navigation」をjQueryで設定してみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
javascript
jquery
mootools

グラデーションのように変化するナビゲーション「Fancy Navigation」をjQueryで設定してみる

以前紹介した、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 その1t

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

■プレビュー その1

■ちょっと説明

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

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

もう一つの方法

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

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

■JavaScrip その2

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

■プレビュー その2



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。