jQueryの処理を実行するタイミングを制御するのが「イベント」です。
イベントを設定することで、「クリックしたとき」や「ドラッグ＆ドロップしたとき」など、指定した要素に対する何らかの操作が発生したときに、HTMLやCSSを操作できます。
イベントは次のようにして設定します。
$("セレクター").イベント(function(){
// イベント処理
});
【例】
$("button").click(function(){
$("img").attr("src","sea.jpg");
});
実行前HTML
<button>画像を変更</button>
<img alt="" src="flower.jpg" />
実行結果(画像はなし)
イベントには、クリック（click）やダブルクリック（dblclick）、マウスダウン（mousedown）、マウスアップ（mouseup）、マウスオーバー（mouseover）、マウスアウト（mouseout）、マウスムーブ（mousemove）などを設定できます。
◆jQueryでアニメーション効果を付ける
jQueryを使うと、要素の表示／非表示に、アニメーション効果を付けられます。アニメーション効果には次のような命令があります。
①ノーマルアニメーション
$("セレクター").show(スピード); 表示
$("セレクター").hide(スピード); 非表示
②スライドアニメーション
$("セレクター").slideDown(スピード); 表示
$("セレクター").slideUp(スピード); 非表示
③フェードアニメーション
$("セレクター").fadeIn(スピード); 表示
$("セレクター").fadeOut(スピード); 非表示
「スピード」のところには
slow／normal／fastのいずれか、
またはミリ秒（1秒＝1000秒）単位で数字を指定できます。
たとえば次のサンプルでは、
button要素がクリックされると、
CSSで非表示（display:none;）に設定されている赤色のdiv要素が、
少しずつ拡大しながら表示されます。
スクリプト部分
$("button").click(function(){
$("div").show("slow");
});
CSS部分
div{
width:200px;
height:200px;
background:red;
display:none;
}
HTML部分
<button>表示</button>
