// JavaScript Document
//ナビゲーションをフェードでアニメーションさせる
/*
使い方：
・用意するもの
jqueryのライブラリJSファイル
このファイル

・まずhead内に上記のファイルを読み込ませます。
<script type="text/javascript" src="../jqueryライブラリファイルへのパス"></script>
<script type="text/javascript" src="../このファイルヘのパス"></script>
※注意!!
必ずjqueryのファイルを読ませてからこのファイルを読み込ませてください。

・上記の記述の後に以下の記述を行います。
<script type="text/javascript">
<!--

$(document).ready(function(){});

-->
</script>
この記述は"この中に書いているスクリプトを、ページのロードが完了してから(bodyタグの中が全部ブラウザで読み込まれてから)実行してください"という命令です。
readyのカッコの中にあるfunctionの{}内に実行するスクリプトを記述します。改行をくわえると書きやすくなります。
$(document).ready(function(){ここで改行を加える。
		この間にスクリプトを記述していきます。
	});こんな感じ。

・{}内に書く内容
$(document).ready(function(){
		$(Navfade('#id名','url(ナビゲーションの画像ファイルへのパス)','通常の状態の時の背景の位置','hoverしたときの背景の位置','文字の色(オプション)'));
	});
まず{}内に以下の記述を行います。
$();
これはjqueryのショートコードと呼ばれる書き方です。このなかにDOMやfunctionを記述できます。
今回の動き(関数)のなまえはNavfade()です。大文字小文字は区別されるので注意してください。
$(Navfade());
Navfade()の()の中には５つの"引数"を指定できます。
ひとつめの引数はid名(class名)です。
id名・class名の指定は、アニメーションさせたい要素のa要素に記述してください。
例：
<ul>
	<li><a href="#" id="id名">アニメーションさせたい要素</a></li>
</ul>

書き方は、''(シングルクオーテーション)のなかに、id名なら#id名、class名なら.class名と記述します)
例：
$(Navfade('#id'))

次に画像のパスを記述します。
書き方は,id名の記述を,(カンマ)で区切って''(シングルクオーテーション)のなかにurl(画像のパス)を記述します。
例：
$(Navfade('#id'),'url(image.png)'));

次に指定できるのが、通常の状態の画像のポジション指定です。
書き方は画像のパスの記述を,(カンマ)で区切って''(シングルクオーテーション)のなかにx軸方向の位置(半角スペース空けて)y軸方向の位置を記述します。
例：
$(Navfade('#id'),'url(image.png)','0px 10px');

次に指定するのが、hover(マウスを上に乗せたとき)の画像のポジション指定です。
書き方は、通常の状態の画像のポジションの記述を,(カンマ)で区切って''(シングルクオーテーション)のなかにx軸方向の位置(半角スペース空けて)y軸方向の位置を記述します。
例：
$(Navfade('#id'),'url(image.png)','0px 10px','0px -10px');

最後に指定できるのが、文字の色です。これはオプションなので、必要無ければ記述しなくても大丈夫です。
書き方は、hoverの画像のポジションの記述を,(カンマ)で区切って''(シングルクオーテーション)のなかに十六進数か色コードで記述します。
例：
$(Navfade('#id'),'url(image.png)','0px 10px','0px -10px','#000000');

以上で完成です。
最終的には以下の形になります。

<script type="text/javascript">
<!--
$(document).ready(function(){
	$(Navfade('#id'),'url(image.png)','0px 10px','0px -10px','#000000');
	});
-->
<script>

あとはアニメーションを設定する項目(id名)を全部指定してあげます

<script type="text/javascript">
<!--
$(document).ready(function(){
	$(Navfade('#id1'),'url(image.png)','0px 10px','0px -10px','#000000');
	$(Navfade('#id2'),'url(image.png)','0px 10px','0px -10px','#000000');
	$(Navfade('#id3'),'url(image.png)','0px 10px','0px -10px','#000000');
	$(Navfade('#id4'),'url(image.png)','0px 10px','0px -10px','#000000');
	$(Navfade('#id5'),'url(image.png)','0px 10px','0px -10px','#000000');
	});
-->
<script>

以上で書き方は終わりです。
*/
function Navfade(IDname,url,State,Over,speed,Color){
	var ID = $(IDname);
	var txt = ID.text();
	ID.append('<span>' + txt + '</span>');
	//children()で子要素になるspanを指定。
	$(IDname).children().css({
		position:'absolute',
		top:'0',
		left:'0',
		display:'block',
		width:'100%',
		height:'100%',
		color:Color,
		backgroundImage:url,
		backgroundPosition:State
	});
	ID.css({backgroundImage:url,backgroundPosition:Over});
	ID.hover(
	function(){
		$(this).children().stop().animate({opacity:'0'},speed);<!-- speedも追加してみた、フェードのスピード指定/ -->
	},
	function(){
		$(this).children().stop().animate({opacity:'1'},speed);<!-- speedも追加してみた、フェードのスピード指定/ -->
	})
};//Navfade