0806 jQuery: イベント(2)、アニメーション効果

イベント

mousemove()

特定の要素上でマウスカーソルが動いた時に処理を実行

one()

指定した要素で発生したイベントに対して一度だけ実行する処理を設定できる

$( セレクター ).one( ‘イベント発生の条件’, function(){

イベント発生時に処理

});

イベント発生の条件：click(), mouseup() etc…

on()

指定した要素で発生したイベントに対して実行する処理を設定できる

on()のメリットは実行した時点でHTML上に存在していない要素（将来追加される要素）にイベント処理を登録しておける点

$( セレクター ).on( ‘イベント発生の条件’, ‘イベントが発生する要素’, function(){

イベント発生時に実行する処理

});

off()

設定されているイベント処理を取り消す

$( セレクター ).one( ‘イベント発生の条件’ );

アニメーション効果

show()

非表示状態の要素を表示

CSSをdisplay: none; 指定し、HTML要素を非表示にしておき、要素の透明度を透明から不透明に、高さ・幅を0から本来のサイズに徐々に変化させ、最終的にdisplay: block; に切り替える仕組み。

$( セレクター ).show(スピード, コールバック関数);

スピード：’fast’, ‘slow’, 数字(単位は1000ミリ秒)

コールバック関数：省略可。処理が終わったあとに何らかの関数を呼び出したいときは指定

$( セレクター ).show();

＝$( セレクター ).css(‘display’, ‘block’);

hide()

表示状態の要素を非表示にする

display: block; → display: none;

指定の仕方はshow()と同じ

slideDown() / slideUp()

show() / hide()と違い、スライドアニメーションで表示非表示を切り替える命令

$( セレクター ).slideDown(スピード, コールバック関数);

slideToggle()

slideDown() / slideUp()の合わせ技

fadeIn() / fadeout()

フェードイン／アウトしながらHTML要素の表示・非表示を切り替える命令

fadeTo()

透明度を設定した値まで徐々に変更する命令

$( セレクター ).fadeTo(スピード, 透明度,コールバック関数);

透明度：0～1 (非表示～表示)

animate()

$( セレクター ).animate(値を変えたいCSSプロパティ, スピード, 動き, コールバック関数);

動き：linear(常に一定の速度) / swing(最初ゆっくり後半速く)