animate()メソッド

セレクタで選択した要素のCSSプロパティの値をアニメーションさせることができる。

$("セレクタ").animate(①変化後のcssプロパティ , ②スピード , ③イージング , ④コールバック関数);

$("#list").animate({left:"+=20px"},500);

①{“CSSプロパティ名” : “値”}で記述。
②”slow”、”normal”、”fast”のいずれか、または単位をミリ秒で指定。
③アニメーションの変化の仕方を定義する。”linear”と”swing”のどちらかを指定。初期値は”swing”。”linear”は直線的、”swing”ははずむように変化する。
②③④は省略可能。
※CSSプロパティ名が英数字とアンダースコアのとき、また、値が数字のとき、ダブルクオートを省略することができる。
※「animate」メソッドの値には、相対指定(+=や-=)を使うことができる。

アニメーション関連のメソッド

fadeTo()メソッド

透明度のアニメーションは「fadeTo」メソッドで簡略化できる。

$("セレクタ").fadeTo(スピード , 不透明度 , コールバック関数);
/* $("セレクタ").animate({"opacity":不透明度} , スピード , コールバック関数);と同じ意味。 */

$("#list").fadeTo(500 , 1);

delay()メソッド

その名の通り「遅らせる」という意味のメソッド。

delay(遅延させるミリ秒);

/* <div>要素が左方向へ0.5秒かけて100px動き、1秒止まって、その後下方向へ0.5秒かけて100px動いて、
最後1秒かけて消えていく。 */
$("div")
.animate({left:"100px"},500)
.delay(1000)
.animate({top:"100px"},500)
.hide(1000);
inserted by FC2 system