【Java】条件分岐と繰り返し処理について

Java

条件分岐：if文

Java言語にもif文という構文があります。「もしも〜ならば」という文章をプログラムで表現することができます。

public class Sample1 {
	public static void main(String[] args) {
	//条件分岐
	System.out.println("--------");
	//変数の型を宣言する
	boolean f1 = true;
	if (f1){ //条件が入る
		System.out.println("ifのテスト");
	}
	
	int f2 = 30;
	int f3 = 20;
	if(f2 < f3){
		System.out.println("f2の方が小さい");
	}else{
		System.out.println("f3の方が小さい");
	}
	
	}
}

結果表示
--------
ifのテスト
f3の方が小さい


＜例題１＞bmi値が40の場合、肥満度はどの範囲になるか？
18.5未満 「痩せ」、25.0未満 「普通」、30.0未満 「肥満」、それ以上「高肥満度」

public class Sample2 {
	public static void main(String[] args) {
	//bmi値が40の場合、肥満度はどの範囲になるか？
	double bmi = 40.0;
		
	/*
	 * bmi = 18.5未満 「痩せ」
	 * bmi = 25.0未満 「普通」
	 * bmi = 30.0未満 「肥満」
	 * bmi = それ以上「高肥満度」
	 */
	
	//上から順番に処理される
	if(bmi < 18.5){
			System.out.println("痩せ");
		}else if(bmi < 25.0){
			System.out.println("普通");
		}else if(bmi < 30.0){
			System.out.println("肥満");
		}else{
			System.out.println("高肥満度");
		}
	
	}
}

結果表示
--------
高肥満度


＜例題２＞if else文と数学関数Math.random( )を使って、おみくじが引けるJavaを記述します。

public class Sample3 {
	public static void main(String[] args) {
		//おみくじ
		System.out.println("--------");
		double g1 = Math.random();
		
		/*
		 * g = 0.4のように任意の数字代入して確認。
		 */
		
		if(g1 < 0.1){
			System.out.println("大吉");
		}else if(g1 < 0.5){
			System.out.println("吉");
		}else if(g1 < 0.8){
			System.out.println("小吉");
		}else if(g1 <0.99){
			System.out.println("凶");
		}else{
			System.out.println("大凶");
		}
	
	}
}

結果表示
--------
小吉

条件分岐：switch文

switch文は、複数のcaseという選択肢から式の値に合うものを選択して処理を実行します。式の値がどれにも当てはまらない場合はdefaultに進みます。各選択肢の最後にはbreak文を記述し、選択した処理のみを行うようにします。

public class Sample4 {
	public static void main(String[] args) {
	//switch文
	System.out.println("--------");
	int h1 = 2;
	switch(h1){
		case 1:
			System.out.println("1月");
			break; //break文：処理を終了
		case 2:
			System.out.println("2月");
			break;
		case 3:
			System.out.println("3月");
			break;
		default: //:コロンで閉める
			System.out.println("それ以外");
		}
	
	}
}

結果表示
--------
2月


＜例題３＞if else文で宣言された変数に対して1月から5月までを表示させます。

public class Sample5 {
	public static void main(String[] args) {
		int h2 = 5;
		if(h2 == 1){ // ==に注意する！！
			System.out.println("1月");
		}else if(h2 == 2){
			System.out.println("2月");
		}else if(h2 == 3){
			System.out.println("3月");
		}else if(h2 == 4){
			System.out.println("4月");
		}else if(h2 == 5){
			System.out.println("5月");
		}else{
			System.out.println("それ以外");
		}
	
	}
}

結果表示
--------
5月

繰り返し処理：for文

for文は、繰り返し処理を効率よく行う制御文です。

public class Sample6 {
	public static void main(String[] args) {
		//for文
		for(int i = 0;i < 10;i++){
			System.out.println(i);
		}
		
		System.out.println("--------");

		//1~20までの数字を表示
		for(int i = 1;i <= 20;i++){
			System.out.println(i);
		}
		
		System.out.println("--------");

		//1~30までの数字を表示(奇数のみ)
		for(int i = 1;i <= 30;i++){
			if(i%2 != 0){ //!：否定を使う
				System.out.println(i);
			}
		}
	
	}
}

【Java】変数、型、演算子、乱数について

Java

変数

JavaではJavaScriptと違い、変数を宣言する場合に型を必ず指定する必要があります。
実際に、変数を使った計算式を作ってみます。

public class Sample1 {
	public static void main(String[] args) {
	//変数
        System.out.println("--------");
        int a1 = 5; //整数の入る箱(a1)に５を代入
        System.out.println(a1);
        
        int a2 = 1; //整数の入る箱(a2)に１を代入
        System.out.println(a1 - a2);
	}
}

結果表示
--------
5
4


変数の型には、int（整数型）、double（実数）、string（文字型）、boolean（論理型）などの基本型があります。宣言された変数が使われていない場合、行の左側に黄色い警告アイコンと変数に波線が表示されます。

public class Sample2 {
	public static void main(String[] args) {
	//型（データの種類）
	System.out.println("--------");
	int b1 = 10; //int：整数
	double b2 = 0.5; //double：実数
	String b3 = "こんにちは"; //string：文字列
	boolean b4 = true; //boolean：論理値（true/false）
	
	//黄色の波線は警告（使ってない変数がある）
	System.out.println(b1);
	
	/*
	 * 型の不一致。左側にエラーメッセージが表示される
	 * int b1 = "aaaaa";
	 */
	}
}

結果表示
--------
10

算術演算子

計算に用いる「＋」や「÷」などのことを算術演算子といいます。これら演算子を使うことで計算をすることができます。変数を宣言する場合は、型の指定を忘れずに。

public class Sample3 {
	public static void main(String[] args) {
	//計算
	System.out.println("--------");
	System.out.println(1 + 2);//足し算
	System.out.println(10 - 3);//引き算
	System.out.println(7 * 5);//掛け算
	System.out.println(7 / 2);//割り算
	System.out.println(7 % 5);//割り算（余り）
	
	System.out.println(2 + 3 + 4);
	System.out.println((2 + 3) * 4);
	
	//計算（変数）
	System.out.println("--------");
	int c1 = 10;
	int c2 = 5;
	int c3 = c1 / c2;
	String c4 = "割る";
	String c5 = "は";
	System.out.println(c1 + c4 + c2 + c5 + c3);
	}
}

結果表示
--------
3
7
35
3
2
9
20
--------
10割る5は2

比較演算子

条件式で使う比較演算子を使って、値を比較してみます。
結果をコンソール表示させる場合、前回の「Javaプログラム」を再実行させるショートカットキーControl + F11を使うと便利です。EclipseWikiにショートカットキーの一覧ページがあるのでよく使うキーはチェックしておきましょう。

public class Sample4 {
	public static void main(String[] args) {
	int e2 = 5;
	int e3 = 10;
	System.out.println("--------");
	System.out.println(e2 == e3);
	System.out.println(e2 != e3);
	System.out.println(e2 < e3);
	System.out.println(e2 > e3);
	System.out.println(e2 <= e3);
	System.out.println(e2 >= e3);

	/*
	 * 前回の実行をショートカット ctr + F11
	 */
	}
}

結果表示
--------
false
true
true
false
true
false

論理演算子

論理演算子「&&」や「||」、「!」を使うと、より複雑な条件を表すことができます。それでは否定を意味する演算子「!」を使ってboolean型の結果を表示してみます。

public class Sample5 {
	public static void main(String[] args) {
	//論理演算子
	System.out.println("--------");
	boolean e1 = false;
	System.out.println(e1);
	System.out.println(!e1); //!←否定する：結果を反転
	}
}

結果表示
--------
false
true

数学関数

数学関数を行うMathオブジェクトをつかって乱数を発生させてみます。乱数を扱うにはrandom()メソッドをつかいます。実数を扱うので変数の型はdoubleをつかいます。

public class Sample6 {
	public static void main(String[] args) {
	//乱数
		System.out.println("--------");
		double d1 = Math.random(); //0以上1未満の小さい乱数を発生させる
		System.out.println(d1); //乱数を発生させる
	}
}

結果表示
--------
0以上1未満の実数の乱数（結果はランダムに表示されます）

【Java】こんにちはJavaを表示してみよう

Java

プログラムを読んでみよう

「Hello java」と「こんにちはJava」を表示するプログラムをJava言語で記述してみます。サンプルを使って各行について簡単に解説します。開発環境にはeclipseを使っています。コードの補完候補を表示するときは、Control+スペースを使うと楽にコードが書けるようになります。（※ここら辺は、Dreamweaverと同じです。）

public class Hello {
	public static void main(String[] args) {
		System.out.println("こんにちはJava");
	}
}


public class HelloからHelloという名前のクラスを宣言しています。通常、クラスの名前の最初の１文字目は大文字にします。Java言語では、大文字と小文字の区別がとても重要です。

//1行目
public class Hello{
（ここにクラスHelloの宣言内容が書かれます）
}


public static voidはJava言語で特別な意味を持つ単語（予約語）です。この行はmainという名前のメソッドを宣言しています。Javaではmainメソッドが開始位置であり、スタートポイントになります。

//2行目
public static void main(String[] args) {
（ここにmainメソッドの宣言内容が書かれます）
}

こんにちはJavaを表示してみよう

それでは、System.out.print()とSystem.out.printlt()の２つのメソッドを使ってコンソールに結果を表示してみます。

public class Hello {
	public static void main(String[] args) {
		System.out.println("----表示1----");
                //print()：改行なし
		System.out.print("Hello java");
		//println()：改行あり
		System.out.println("こんにちはJava");
		
		System.out.println("----表示2----");
		//println()：改行あり
		System.out.println("こんにちはJava");
		//print()：改行なし
		System.out.print("Hello java");
	}

}

結果表示
----表示1----
Hello javaこんにちはJava
----表示2----
こんにちはJAVA
Hello java

【JavaScript】正規表現

JavaScript

正規表現とは

正規表現をつかうと文字列を抽象的に扱うことができます。「○○の日記」といった異なる文字列を「＜半角英数文字＞の日記」のように１つの形式で表現できます。

メタ文字

メタ文字には次のようなものがあり、それぞれ特殊な意味を持っています。

メタ文字 意味
. 任意の１文字（改行を除く）
* ０回以上の繰り返し
+ 1１回以上の繰り返し
? ０回または１回の繰り返し
^ 先頭
$ 末尾
() 正規表現のクラス
[ ] 文字クラス
{n} ｎ回の繰り返し
{n,} ｎ回以上の繰り返し
{n,m} ｎ回以上ｍ以下の繰り返し
\ メタ文字を文字として扱う

文字クラス

複数の文字を集めたものを文字クラスといいます。
文字クラスは[ ]で挟んで記述し、挟んだ文字の中のどれか１文字を表します。
文字クラスの先頭に「^」をつけると、文字クラスの否定を表します。

[2,4,6,8]
2,4,6,8のどれか１文字

[^2,4,6]
2,4,6以外の１文字

[0-9] = [0123456789]


文字クラスには、あらかじめ用意されている特殊文字を使って表現することもできます。

特殊文字 文字クラスの表記 意味
\w [0-9a-zA-Z_] 半角英数文字とアンダーバー
\W [0-9a-zA-Z_] 半角英数文字とアンダーバー以外
\s [\t\n\r\f] 空白（半角スペース、タブ、改行）
\S [\t\n\r\f] 空白（半角スペース、タブ、改行）以外
\d [0-9] 数字
\D [0-9] 数字以外

RegExpオブジェクト

正規表現でパターンマッチを行うには、RegExpオブジェクトを使います。

＜例題＞「I like sushi and curry」から小文字アルファベットで５文字の文字列を抽出します。

//変数の宣言
str = "I like sushi"

//小文字アルファベットで５文字の文字列のパターンオブジェクトを作成
reg = new RegExp("[a-z]{5}");

//match()メソッドを使い、パターンマッチした文字列を含む配列を返します。
mat = str.match(reg);

<h2>RegExp</h2>
<script type="text/javascript">
document.write(mat);
</script>


大文字と小文字を区別しないときは、オプションのiフラグを使います。

str = "I like sushi and curry";
reg = new RegExp("[A-Z]{5}","i");
mat = str.match(reg);


マッチした文字列をすべて取得するには、オプションのgフラグを使います。
取得した文字列は配列で返されます。

str = "I like sushi and curry";
reg = new RegExp("[a-z]{5}","g");
mat = str.match(reg);

文字列を置換する

文字列を置換するには、replace()メソッドを使います。

str = "I like sushi";
//置換後の文字列
rep = "curry"
reg = new RegExp("[a-z]{5}","g");
//replace()メソッドを使って文字列を置換
mat = str.replace(reg,rep);

【JavaScript】日付の求め方

JavaScript

Dateオブジェクト

日付や時刻を扱うには、Dateオブジェクトを使います。
引数を使わない場合、現在の日付と時刻のDateオブジェクトを作成します。

//引数の指定なし
now = new Date();
/*結果表示
 *Sun Oct 03 2010 06:55:38 GMT+0900
*/

//引数にクリスマスを指定
now new Date(2010,12,24,0,0,0);
/*結果表示
 *Mon Jan 24 2011 00:00:00 GMT+0900
*/

現在の日付と時刻を取得する

現在の日付と時刻を取得するには、次のメソッドを使います。

メソッド 働き
getFullYear() 西暦年を取得します
getMonth() 月を１小さい数で取得します
getDate() 日を取得します
getDay() 日曜日を０とし、０から６までの数値で曜日を取得します
getHours() 時間を取得します
getMinutes() 分を取得します
getSeconds() 秒を取得します
getTime() １９７０年１月１日午前０時からのミリ秒単位を取得します


＜例題１＞Dateオブジェクトを使って現在の日時を求めてみます。

//現在の日付と時刻
now = new Date();

//年の表示
FY = now.getFullYear();

//月の表示
M = now.getMonth() + 1;

//日付の表示
Dt = now.getDate();

//曜日の表示
var day = ["日","月","火","水","木","金","土"]
Dy = day[now.getDay()];

<h2>日付の表示</h2>
<script type="text/javascript">
document.write("<h3>" + now + "</h3>");
document.write("<h3>" + FY + "年" + M + "月" + Dt + "日" + "(" + Dy + ")");


＜例題２＞クリスマスまであと何日かを求めてみます。

//現在の日付と時刻
now = new Date();

//クリスマスの日付
day = new Date(2010,12,24,0,0,0);

//クリスマス - 現在の日時（ミリ秒の差を求めます）
time = day.getTime() - now.getTime();

//ミリ秒単位から日単位を計算します
days = Math.ceil(time/(24*60*60*1000));

<h2>クリスマスまであと何日</h2>
<script type="text/javascript">
document.write(days + "日");
</script>

【jQuery】外部ファイルの読み込みと操作

jQuery

今回は、外部ファイルの読み込みと操作、GETメソッドを使ったファイルの扱い方を中心に紹介していきます。APIを使ったWebアプリケーションをつくる際に必要になってくるJSON形式について覚えましょう！！


以下のファイルを用意してください。
sample.html

<h2>load</h2>
<p>外部ファイルのテキストデータをそのままタグに置き換える</p>
<!-- javascript:void(0)：リンク表示、アクションは起こさない -->
<div><a id="load" href="javascript:void(0)">読み込み</a></div>
<div id="txtLoad">データ</div>

<br />

<p>外部ファイルのHTMLデータをそのままタグに置き換える</p>
<a id="load2" href="javascript:void(0)">読み込み(HTML)</a>
<div id="htmlLoad" >データ(HTML)</div>

<br />

<h2>get/post</h2>
<p>getまたはpostで外部データを取得して変数を格納</p>
<div id="getLoad">読み込んでいません（get）</div>

<br />

<h2>JSON</h2>
<p>JSON形式のデータを取得して変数に格納</p>
<div id="jsonLoad">読み込んでいません（JSON）</div>

テキストファイルの読み込みと操作

クリックするたびに引数の命令を交互に処理する".toggle"を使って、リンクテキストをクリックするとsample.txtの内容がid="txtLoad"の要素が交互に置き換わる様にjQueryを記述します。


以下のファイルを用意してください。
sample.txt

おめでとう！！テキストを読み込みました
$(function(){
	//テキストの読み込み
	//$("#txtLoad").load("DATA/sample.txt")

	$("#load").toggle(
		function(){
			//リンクをクリックするとsample.txtが読み込まれ、リセット用のリンクテキストが表示されます
			$(this).text("リセット")
			$("#txtLoad").load("DATA/sample.txt")
			},
		function(){
			//リセット用のテキストがクリックされた後の処理になります
			$(this).text("読み込む")
			$("#txtLoad").text("読み込んでいません")
	});
});

HTMLファイルの読み込みと操作

同様に、テキストファイルのときと同じ記述をすることでHTMLファイルを読み込むことができます。簡単な応用問題なので上の例題を参考にして書いてみましょう！！


以下のファイルを用意してください。
sample2.html

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ul>

$(function(){
	//HTMLの読み込み
	$("#load2").toggle(function(){
		//リンクをクリックするとsample2.htmlが読み込まれ、リセット用のリンクテキストが表示されます
		$(this).text("リセット")
		$("#htmlLoad").load("DATA/sample2.html")
	},
	function(){
		//リセット用のテキストがクリックされた後の処理になります
		$(this).text("読み込み")
		$("#htmlLoad").text("読み込んでいません")
	});
});

getメソッドを使ったファイルの読み込みと操作

GETメソッドを使うことで外部ファイルに対してリクエストを送ります。jQuery.get( url, data, callback )などを使うことでHTTP(GET)通信でページを読み込むことができます。ここでは用意したテキスト形式のファイルをテーブル上に読み込んで点数表にしてみます。JavaScriptと同様に繰り返し構文のfor文を使ってタグを処理することができます。


以下のファイルを用意してください。
sample4.txt

80,95,100,40,75
$(function(){
	//DATA/sample4.txtのデータを変数dataに渡す
	$.get("DATA/sample4.txt",function(data){
		//変数を宣言
		//sample4.txtのデータを",（カンマ）"区切りで変数scoresに配列の状態で値を渡す
		var scores = data.split(",");
		var html = "";
		
		//<table>
		html += "<table border='1'>";
			html += "<tr>";
				html += "<th>番号</th>";
				html += "<th>得点</th>";
			html += "</tr>";
		
		//<tr><td>タグをfor文で繰り返し処理をする
		for ( var i = 0; i < scores.length; i++) {
			html += "<tr>";
				html += "<td>" + (i+1) + "</td>";
				html += "<td>" + scores[i] + "点</td>";
			html += "</tr>";
		
		//変数の宣言（合計点と平均点）
			total = parseInt(scores[i]);
			avg = total/scores.length;
		}
		
		//合計点の表示
			html += "<tr>";
				html += "<td>合計</td>";
				html += "<td>" + total + "点</td>";
			html += "</tr>";
		
		//平均点の表示
		html += "<tr>";
			html += "<td>平均</td>";
			html += "<td>" + avg + "点</td>";
		html += "</tr>";
		
		//</table>
		html += "</table>";
		
		//id＝getLoadに変数htmlを代入する
		$("#getLoad").html(html);
	});
});

JSON形式のファイルの読み込みと操作

JSONとはJavaScript Object Notationの略で、XMLなどと同様のテキストベースのデータフォーマットです。その名前の由来の通りJSONはJavaScriptのオブジェクト表記構文のサブセットとなっており、XMLと比べると簡潔に構造化されたデータを記述することができるため、記述が容易で人間が理解しやすいデータフォーマットになっています。先程と同様にJSON形式のファイルからデータを読み込んで点数表にしてみます。


以下のファイルを用意してください。
sample6.json

[
	{"name":"山田","score":85},
	{"name":"田中","score":75},
	{"name":"鈴木","score":100}
]
$(function(){
	//DATA/sample6.jsonのデータを変数jsonに渡す
	$.getJSON("DATA/sample6.json",function(json){
		//変数の宣言
		var html = "";
		var total = 0;
		
		//<dl>
		html += "<dl>";
		
		//<dt>タグをfor文で繰り返し処理をする
		for ( var i = 0; i < json.length; i++) {
			html += "<dt>名前</dt>";
			html += "<dd>" + json[i].name + "</dd>";
			
			html += "<dt>点数</dt>";
			html += "<dd>" + json[i].score + "</dd>";
		
		//変数の宣言（合計点）
		total += json[i].score; 
		
		}
		
		//合計点の表示
		html += "<dt>合計点</dt>";
		html += "<dd>" + total + "</dd>";
		
		//</dl>
		html += "</dl>";
		
		//id＝jsonLoadに変数htmlを代入する
		$("#jsonLoad").html(html);
		
	});

	
});

【jQuery】属性の操作とイベント処理（２）

jQuery

前回に引き続き、jQueryで記述する「属性の操作とイベント処理」について書きます。今回は、クリックするとメニューが表示・非表示されるなどのアニメーション効果を中心に紹介していきます。
以下のHTMLとCSSを用意してください。

<ul id="hover">
	<li>リスト１</li>
	<li>リスト２</li>
	<li>リスト３</li>
</ul>
<p id="p1">toggleClass</p>
<p id="p2">toggle</p>
<p id="p3">メソッドチェーン</p>
<ul>
	<!-- javascript:void(0)：リンク表示、アクションは起こさない -->
	<li><a id="a1" href="javascript:void(0)">表示・非表示</a></li>
	<li><a id="a2" href="javascript:void(0)">フェードイン・フェードアウト</a></li>
	<li><a id="a3" href="javascript:void(0)">スライドアップ・スライドダウン</a></li>
	<li><a id="a4" href="javascript:void(0)">連続エフェクト</a></li>
	<li><a id="a5" href="javascript:void(0)">fadeTo</a></li>
	<li><a id="a6" href="javascript:void(0)">toggle</a></li>
	<li><a id="a7" href="javascript:void(0)">slideToggle</a></li>
</ul>

@CHARSET "utf-8";
.caution {
	background-color:blue;
	color:fuchsia;
}
.p1 {
	background-color:green;
}
.p2 {
	color:white;
}

toggleClass：クラス属性を操作する方法

toggleClassを使うことでクラス属性を操作することができます。
id="p1"の要素をクリックすると、指定したCSSから.cautionを追加して「toggleClass」の背景と文字色を変えてみます。

$(function(){
        //toggleclass 其ノ壱
        //関数化されたtoggleClassをクリックイベント処理する
        //.clickはクリックされるたびに指定したCSSから要素を追加・削除します
    	$("#p1").click(toggleCaution);
});

//toggleClassを関数化
function toggleCaution(){
	$(this).toggleClass("caution");
}


以下の様に、関数化せずにjQueryとして記述することもできます。

$(function(){
        //toggleClass 其の弐
	$("#p1").click(function(){
		$(this).toggleClass("caution");
	});
});

処理を連続して記述できるメソッドチェーン

使いたいメソッドを「.」でつないでいくだけで、まるでレゴを組み立てるようにプログラムを記述することができます。
id="p3"の要素をメソッドチェーンを使って処理を連続して記述してみます。

$(function(){
	$("#p3").click(function(){
		$(this).toggleClass("p1").toggleClass("p2");
	});
});

toggleを使ったアニメーション効果

toggleはクリックするたびに引数の命令を交互に行います。

$(function(){
        $("#p2").toggle(addCaution,removeCaution);
});
function addCaution(){
	$("#hover li").addClass("caution");
}
function removeCaution(){
	$("#hover li").removeClass("caution");


toggleの引数の命令を交互に実行する性質を使って、リストのメニューに対してアニメーション効果を付けてみます。
文法は以下のようになります。

$("要素").toggle(
	function(){/* 実行する内容on */},
	function(){/* 実行する内容off */}
);


それでは.showと.hideを使ってリストの表示/非表示のアニメーション効果を追加してみます。

$(function(){
	$("#a1").toggle(
		//表示
		function(){
		$("#hover").show("slow")
		},
		//非表示
		function(){
		$("#hover").hide(1000)
	});
});


.fadeInと.fadeOutを使ってリストにフェードイン/フェードアウトのアニメーション効果を追加してみます。

$(function(){
	$("#a2").toggle(function(){
		//フェードイン
		$("#hover").fadeIn("slow")
	},
	function(){
		//フェードアウト
		$("#hover").fadeOut(1000)
	});
});


.slideUpと.slideDownを使ってリストにフェードイン/フェードアウトのアニメーション効果を追加してみます。

$(function(){
	$("#a3").toggle(function(){
		//スライドアップ
		$("#hover").slideUp("slow")
	},
	function(){
		//スライドダウン
		$("#hover").slideDown("1000")
	});
});


メソッドチェーンを使って連続エフェクトのアニメーション効果を追加してみます。

    .toggleではなく.clickでイベント処理している点に注意してください。

$(function(){
	$("#a4").click(function(){
		//連続エフェクト
		$("#hover").slideUp("slow").fadeIn(500)
	});
});


.fadeToを使ってリストに透明度のアニメーション効果を追加してみます。

$(function(){
	$("#a5").click(function(){
		//fadeTo:透明度を設定します。(1000,0.3)は１秒間かけて透明度を0.3にします
		$("#hover").fadeTo(1000,0.3)
	});
});


.toggleを使ってリストに表示/非表示のアニメーション効果を追加してみます。

$(function(){
	$("#a6").click(function(){
		//表示/非表示
		$("#hover").toggle(1500)
	});
});


.slideToggleを使ってリストにスライド効果付きの表示/非表示のアニメーション効果を追加してみます。

$(function(){
	$("#a7").click(function(){
		//slideToggle：スライド効果付きの表示/非表示
		$("#hover").slideToggle(3000)
	});
});