Dreamweaverを使ったjQuery入門
後編　～ 要素の追加・削除、イベント処理、アニメーションを実装

原題：jQuery入門 with Dreamweaver CS5.5　後編

イベント処理

　プログラムでUIを実装する場合、様々な「イベント」を処理するという形でプログラミングを行うのが一般的です。「マウスを動かした」「クリックした」「スクロールした」などの断続的に発生するユーザ操作の他にも、「Webページの読み込みが終わった」などのタイミングでもイベントは発生します。そうした様々なイベントに対して、イベント発生時の処理を関数の形で登録しておくと、「イベントが発生した時にその関数を呼び出す」という動作が行われます。

　jQueryを用いずに、JavaScriptのみでイベント処理を記述する場合、以下のようなコードになります。しかもこのコードは、Internet Explorer 8以前では動作しません（対応するには、違うAPIを用いる必要があります）。

element.addEventListener('click', function(e) {
 　～クリックイベント発生時の処理～ 
}, false);

　jQueryを用いると、こうした処理をより直感的に短く記述することができます。

$(element).click(function(e) {
 　～クリックイベント発生時の処理～ 
});

メソッド	内容
click()	クリックイベントの処理、または発生させる
change()	要素の状態が変更したイベントを処理、または発生させる（changeイベントは、主に入力フォーム要素の状態が変化した際に発生する）
submit()	フォームの送信イベントを処理、または発生させる
on('イベント名', 関数)	任意のイベントを処理する

　on()の例として、「要素にフォーカスが当たった」というイベントで処理を実行するには、以下のように記述します。

$(element).on('focus', function() {
 　～フォーカスが当たった時の処理～ 
});

　また、画面の読み込みが完了したイベントを捕捉するには、以下の2つの方法があります。どちらも同じで、特に違いはありません。

$(function() {
 　～画面の読み込みが完了した際の処理～ 
});

$(document).ready(function() {
 　～画面の読み込みが完了した際の処理～ 
});

アニメーション

　昨今のWebサイトでは、ちょっとしたアニメーションを用いることで、使い心地や見た目の美しさを向上させている例がよく見られます。もはやWebページにとって、こうした演出は欠かせないものになったといってよいでしょう。

　jQueryを用いると、アニメーションも容易に実現できます。例えば、要素をフェードイン・フェードアウトさせるには、以下のようなコードを使用するだけです。

// フェードイン $(element).fadeIn(); 

// フェードアウト $(element).fadeOut();

　要素をスライドアニメーションさせることもできます。

// 下から上にスライド $(element).slideUp(); 

// 上から下にスライド $(element).slideDown();

　こうしたアニメーション機能の中核となっているのが、animate()メソッドです。このメソッドの基本的な機能は、「CSSプロパティの値を時系列に沿って変更する」というものです。例えば、以下のように記述すると、要素が現在の座標から(100, 100)の座標まで、2秒間かけて移動します。

// 第1引数が変更後のCSSプロパティの値 
// 第2引数がアニメーションの時間(単位はミリ秒) 
$(element).animate({ 
    top: 100, left: 100 
}, 2000);